微信小程序九宫格代码

微信小程序九宫格代码可以通过使用 wxs 实现。以下是一个简单的示例：

wxs 文件：

var utils = require('./utils.wxs');

module.exports = {
  getGridList: function (list, colNum) {
    var row = Math.ceil(list.length / colNum);
    var gridList = [];
    for (var i = 0; i < row; i++) {
      var rowList = [];
      for (var j = 0; j < colNum; j++) {
        var index = i * colNum + j;
        if (index < list.length) {
          rowList.push(list[index]);
        } else {
          rowList.push(null);
        }
      }
      gridList.push(rowList);
    }
    return gridList;
  }
}

wxml 文件：

<view class="grid">
  <block wx:for="{{utils.getGridList(list, colNum)}}" wx:for-item="row" wx:key="index">
    <view class="row">
      <block wx:for="{{row}}" wx:for-item="item" wx:key="index">
        <view class="col" wx:if="{{item}}">
          <image src="{{item.imgUrl}}" mode="aspectFill"></image>
          <text>{{item.title}}</text>
        </view>
      </block>
    </view>
  </block>
</view>

在这个示例中，我们定义了一个名为 `getGridList` 的函数，它接受两个参数：列表和列数。该函数将列表转换为一个二维数组，每个子数组包含指定数量的元素。在 wxml 文件中，我们使用 `wx:for` 循环遍历二维数组，并使用 `wx:if` 条件语句来判断当前元素是否为空。如果不为空，则渲染一个包含图片和标题的格子。