微信小程序GridView列表

---

在微信小程序开发过程中，默认是ListView显示数据。然而有些需求需要 gridview列表数据。怎么办么？

1.利用百分比%+浮动实现

1.WXML文件

<view class='gridview'>

  <block wx:for="{{listdata}}" wx:key="key">
    <view class='gridview-item'>

      <text>{{item.content}}</text>
    </view>

  </block>

</view>

2 .重点是样式 wxss

.gridview{

    margin: 5rpx 10rpx 5rpx 10rpx;
}

.gridview-item{
    margin: 1%;
    width: 48%;
    height: 300rpx;
    float: left;
    background: rebeccapurple
}

注意事项：
不要给gridview父布局添加display: flex;属性

3.js文件

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {

    listdata: [{
        content: "内容1"
      },
      {
        content: "内容2"
      },
      {
        content: "内容3"
      }
    ]

  },

  onLoad: function(event) {

  }

})

效果图：

yhx.gif

如果要实现三列怎么办？
答案：把windth=33.3333%,注意这是平分屏幕三等分，注意还要去掉间隙的宽，做微调即可