微信小程序 grid-view组件的使用

grid-view组件是微信小程序中的一种布局组件，用于展示一个网格视图。在使用前，需要在页面的json文件中引入该组件：

{
  "usingComponents": {
    "grid-view": "/components/grid-view/grid-view"
  }
}

然后在页面的wxml文件中使用该组件：

<grid-view
  bind:tap="handleTap"
  column-num="3"
  items="{{items}}"
  item-class="grid-item"
  icon-class="grid-icon"
  text-class="grid-text"
/>

其中，`bind:tap`是组件的点击事件；`column-num`是每行展示的列数；`items`是要展示的数据数组；`item-class`是每个单元格的class名称；`icon-class`是图标的class名称；`text-class`是文本的class名称。

在js文件中，需要定义`items`数组，并在`handleTap`事件中处理点击事件：

Page({
  data: {
    items: [
      {
        icon: "/images/icon1.png",
        text: "功能1"
      },
      {
        icon: "/images/icon2.png",
        text: "功能2"
      },
      {
        icon: "/images/icon3.png",
        text: "功能3"
      },
      {
        icon: "/images/icon4.png",
        text: "功能4"
      }
    ]
  },
  handleTap: function(e) {
    console.log(e.currentTarget.dataset.index);
  }
})

其中，`items`数组中的每个元素代表一个单元格，包括图标和文本内容；在`handleTap`事件中，可以通过`e.currentTarget.dataset.index`获取到点击的单元格的索引。