快速实现vue uni-app宫格组件提供常见九宫格菜单组件，扩充性好，可切换四宫格 九宫格 十二宫格; 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12680
效果图如下：
代码如下
# 宫格组件提供常见九宫格菜单组件，扩充性好，可切换四宫格 九宫格 十二宫格 。
#### 使用方法
```使用方法
<view class="grid">
<view class="grid-item" v-for="(item, index) in gridList" :key="index" @click="gridClick(item, index)">
<image :src="item.imgSrc" mode="aspectFill"></image>
<view v-text="item.name"></view>
</view>
</view>
```
#### HTML代码部分
<template>
<view>
<view class="grid-title">
<view></view>
<text>推荐服务</text>
</view>
<view class="grid">
<view class="grid-item" v-for="(item, index) in gridList" :key="index" @click="gridClick(item, index)">
<image :src="item.imgSrc" mode="aspectFill"></image>
<view v-text="item.name"></view>
</view>
</view>
</view>
</template>
```
#### JS代码 （引入组件 填充数据）
```javascript
<script>
import Vue from 'vue';
export default {
data() {
return {
myObjData: {},
gridList: [{
name: '功能1',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能2',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能3',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能4',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能5',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能6',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能7',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能8',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能9',
imgSrc: "../../static/appointNum.svg",
},
]
}
},
onLoad: function() {
},
methods: {
gridClick(item, index) { //格子菜单点击事件
console.log('item = ' + item.name + 'index = ' + index);
uni.showModal({
title:'温馨提示',
content:'点击的功能是: ' + item.name
})
if (index == 0) {
} else if (index == 1) {
} else if (index == 2) {
} else if (index == 3) {
}
}
}
}
</script>
```
#### CSS
```CSS
<style lang="less" scoped>
.grid-title {
display: flex;
align-items: center;
font-size: 32upx;
color: rgba(0, 0, 0, .63);
padding: 30upx 0;
view {
width: 10upx;
height: 30upx;
margin-right: 40upx;
}
}
.grid {
display: flex;
align-items: center;
flex-wrap: wrap;
border-top: 1upx solid rgba(172, 172, 172, .2);
.grid-item {
box-sizing: border-box;
// 设置是九宫格还是十二宫格 /3九宫格 /4十二宫格
width: calc(100% / 3);
border-bottom: 1upx solid rgba(172, 172, 172, .2);
border-right: 1upx solid rgba(172, 172, 172, .2);
text-align: center;
padding: 42upx 0;
position: relative;
image {
width: 54upx;
height: 54upx;
align-items: center;
}
view {
font-size: 28upx;
margin-top: 4upx;
color: #666666;
}
}
}
</style>
```
网友评论