【微信小程序】之自定义九宫格展示row-grid（每行显示三个）

<view class="grid">
  <view class="grid-item" wx:for="{{gridItems}}" wx:key="*this" bindtap="gridTap">
    <image src="{{item.imgUrl}}" mode="aspectFit" />
    <text class="text">{{item.text}}</text>
    <text class="num">{{item.num}}</text>
    <text class="tag" wx:if="{{item.tag&&item.tag>0}}">{{item.tag}}</text>
  </view>
</view>

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 600rpx;
  border-top: 1px solid #eee;
}
 
.grid .grid-item {
  position: relative;
  padding: 30rpx;
  width: 33.3%;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-top: none;
  border-left: none;
  font-size: 30rpx;
  flex-direction: column;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.grid .grid-item:nth-of-type(3n) {
  border-right: none;
}
 
 
 
.grid .grid-item image {
  margin: 0 auto;
  width: 60rpx;
  height: 60rpx;
}
 
.grid .grid-item .tag {
  font-size: 20rpx;
  border-radius: 30rpx;
  padding: 2rpx 10rpx;
  min-width: 30rpx;
  max-width: 40rpx;
  /*单行省略号*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 30rpx;
  color: white;
  background: red;
  position: absolute;
  margin: auto;
  top: 20rpx;
  right: 20rpx;
}

Page({
  data: {
    gridItems: [
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '回收待定价',
        tag: 1
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '过磅回收明细',
        tag: 2
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '过磅回收统计',
        tag: 88
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '销售待出库',
        tag: 9999
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '销售明细',
        tag: 0
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '销售统计',
        // tag: 0
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '入库待定价',
        // tag: 0
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '入库明细',
        // tag: 0
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '入库统计',
        // tag: 0
      },
      {
        imgUrl: "/image/wechatHL.png",
        url: 'http://www.shuzhiqiang.com',
        text: '基础信息',
        // tag: 0
      },
    ],
  },
  gridTap(e) {
    console.log(e);
  },
})