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] //获取图标所有属性

})

}

}