wxml
<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>
wxss
.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; }
js
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); }, })