1、将官方接口app中的宫格组件拷贝到自己uni-app的components 目录下
拷贝到
2、在自己新建界面取实现宫格界面
A、在<script>标签中添加代码如下：
import uniGrid from ‘@/components/uni-grid/uni-grid.vue’ //引用主键的位置
export default {
components: {
uniGrid //声明
},
……
B、在<template>标签中添加
<uni-grid :options=”icons” :show-border=”false” @click=”onClick”/>
// icons 自定义图标集合
//:show-border=”false” 是否显示边框属性
// onClick 点击事件
C、完成自己界面的初始化和点击事件
export default {
……
data() {
return {
swiperGridHeight: ‘0px’,
swiperGridWidth: ‘100%’,
icons: [{
image: ‘static/menus/collect/biaozhundizhi.png’,
text: ‘标准地址’
},
{
image: ‘static/menus/collect/loudong.png’,
text: ‘楼栋’
}
]
}
},
methods: {
onClick(e) {
console.log(‘点击grid:’ + JSON.stringify(e))
//此时返回icons的排列坐标,如0,1，……
//但我想直接获取跳转的页面路径？？？
}
}
}
D、先修改icons，添加url字段
{
image: ‘static/menus/collect/biaozhundizhi.png’,
text: ‘标准地址’,
url: ‘../XXXX/XXXX’ //
}
E、打开宫格组件页面
<view v-for=”(item,index) in items” :hover-start-time=”20″ :hover-stay-time=”70″ :key=”index” :class=”[index == columnNum ? ‘uni-grid-item-last’ : ”,’uni-grid-item-‘ + type]” :style=”{visibility:item.seize ? ‘hidden’ : ‘inherit’}” class=”uni-grid-item” hover-class=”uni-grid-item-hover” @click=”onClick(i,index)”>
//看到@click=”onClick(i,index)”传的不是想要的值，但我不想改次地方！！
F、看<script>export defaultcomputed
只有一个gridGroup()函数，干什么用的？？在上一行代码的上一行有
<view v-for=”(items,i) in gridGroup” :key=”i” class=”uni-grid__flex”>
For遍历，获取初始值的函数！！
细看这个函数返回是一个二维数组，其对应宫格界面最后呈现的样子。
G、修改返回值 在<script> export default methods中修改代码如下
methods: {
onClick(index, num) {
this.$emit(‘click’, {
index: index * this.columnNumber + num,
url : this.gridGroup[index][num].url
})
}
}
H、在自定义界面接收值
methods: {
onClick(e) {
console.log(‘点击grid:’ + JSON.stringify(e))
//点击grid:{“index”:3,”url”:’ ../XXXX/XXXX’}
}
}
完成！！
复杂方法（注释处）
computed: {
gridGroup() {
……
},
/**getIcons() {
let group = []
this.options && this.options.forEach((item, index) => {
group.push(item);
})
return group
}**/
},
……
methods: {
onClick(index, num) {
let ind = index * this.columnNumber + num;
//console.log(‘this.getIcons 》》’ + JSON.stringify(this.getIcons))
this.$emit(‘click’, {
index: index * this.columnNumber + num,
url : this.gridGroup[index][num].url
//item : this.getIcons[ind] //获取图标所有属性
})
}
}