Uniapp builds its own component library (v) Nine grid button group

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Uniapp builds its own component library (v) Nine grid button group

preface

This article will lead the readers to use uniapp encapsulate some commonly used components, convenient development in the future when repeated use, of course, the paper packaging components may not fit all application scenario, but I hope the reader can follow my train of thought, and then can be modified on the basis of optimizing suitable for oneself, I am a front side chicken, hope leaders can be glad to, It is also the improvement of my technical level

9 grid button group

demand

In the usual development, often use the function of the button group, such as the three lines of three columns scratchable latex, or mall button group on applications, so it wraps a button group components, only need to name, icon, you can quickly generate button group, can quickly adjust the number of buttons in a row at the same time, effective response to customer demand changes

Results show

Application effect

Application code

<view>
		<Ybtns :lineNum='lineNum' :data='btnList' @change='change'></Ybtns>
</view>
Copy the code

export default {
		data() {
			return {
				lineNum:4.// Number of buttons per row
				btnList: [// Button information
					{
						icon:'.. /.. /static/icon.png'.// Button icon Mandatory
						name:'button 1'.// Button title is optional
						id:1.// Any other custom fields
					},
					{
						icon:'.. /.. /static/icon.png'.name:'button 2'}, {icon:'.. /.. /static/icon.png'.name:'button 3'}, {icon:'.. /.. /static/icon.png'.name:'button 4'}, {icon:'.. /.. /static/icon.png'.name:'button 5'}, {icon:'.. /.. /static/icon.png'.name:'button 6'}, {icon:'.. /.. /static/icon.png'.name:'button 7'}, {icon:'.. /.. /static/icon.png'.name:'button to 8'}, {icon:'.. /.. /static/icon.png'.name:'button 9',}],}},methods: {
			change(item){
				uni.showToast({
					title:'You clicked${item.name}`})}.}}Copy the code

Implementation approach

The use of grid layout, easy to quickly switch the number of each line, at the same time after clicking can trigger events to return the clicked item

Complete implementation code

/** * the change event returns all data for the clicked item */<template>
	<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}" >
		<view class="item"  v-for="icon_item in data">
			<view class="item_box" :style="{opacity:showimg? '1', '0'}" @tap="tap_item(icon_item)">
				<image :src="icon_item.icon" mode="widthFix"></image>
				<view v-if="icon_item.name">{{icon_item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/** * each line displays several buttons */
			lineNum: {
				type: Number.default: 4
			},
			/ * * * * button array [{icon: 'button image address, name:' button caption text/don't write '}] * /
			data: {
				type: Array.default: []}},data() {
			return {
				showimg: false}; },created() {
			// Solve the page jump caused by not setting the height of the image
			setTimeout(() = > {
				this.showimg = true
			}, 800)},methods: {
			tap_item(item) {
				this.$emit('change',item)
			}
		}
	}
</script>

<style lang="scss">
	.list {
		display: grid;
		.item {
			.item_box {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				align-items: center;
				transition: 0.2 s;

				image {
					width: 100%;
					transition: 0.3 s;

					&:active {
						transform:scale(0.9);
						opacity: 0.7;
					}
				}

				view {
					color: #2B2F33;
					font-size: 14px;
					text-align: center;
					margin-top: 10rpx;
					white-space: nowrap
				}
			}
		}

	}
</style>

Copy the code

Uniapp builds its own component library (v) Nine grid button group