微信小程序 grid-view的使用

GridView 是一种常用的布局方式，可以在小程序中快速实现多项展示的效果。以下是使用微信小程序的 GridView 的一些基本步骤：

1. 新建一个页面，例如 `pages/index/index`，并在 `index.wxml` 文件中添加以下代码：

<view class="grid-view">
  <view wx:for="{{list}}" wx:key="index" class="grid-item">
    <image src="{{item.img}}" mode="aspectFill" class="grid-img"></image>
    <text class="grid-text">{{item.title}}</text>
  </view>
</view>

2. 在 `index.js` 文件中添加数据：

Page({
  data: {
    list: [
      { img: '/images/1.png', title: 'item1' },
      { img: '/images/2.png', title: 'item2' },
      { img: '/images/3.png', title: 'item3' },
      { img: '/images/4.png', title: 'item4' },
      { img: '/images/5.png', title: 'item5' },
      { img: '/images/6.png', title: 'item6' }
    ]
  }
})

3. 在 `index.wxss` 文件中添加样式：

.grid-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx;
}

.grid-item {
  width: calc(50% - 5rpx);
  margin-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid-img {
  width: 100%;
  height: 300rpx;
}

.grid-text {
  font-size: 28rpx;
  color: #333333;
  margin-top: 10rpx;
}

以上代码就可以实现一个简单的 GridView 布局，其中 `list` 是一个数组，用于存储每个 item 的数据。在 `wx:for` 循环中，使用 `item` 获取每个 item 的数据，然后通过 `{{}}` 语法将数据绑定到模板中。在样式中，使用 `flex` 布局实现了每行两个 item 的效果，并设置了一个 `margin-bottom` 属性用于分隔每一行。