宫格列表
<h1>宫格列表</h1>
<ul>
<li>样式图例 （3列、4列、5列、边框）</li>
</ul>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=820ea368a994413026a6195c893f9502&file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=7c4f30fc32ed7fd88e37f210a8ce7739&file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=48f74019c1f3335fdc40a40ca6bebefe&file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=2a674c54f46a355dd50df2727b4c3fed&file=file.png" alt="" /></p>
<ul>
<li>示例代码</li>
</ul>
<pre><code class="language-html">data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
iconList: [{
icon: 'cardboardfill',
color: 'red',
badge: 120,
name: 'VR'
}, {
icon: 'recordfill',
color: 'orange',
badge: 1,
name: '录像'
}, {
icon: 'picfill',
color: 'yellow',
badge: 0,
name: '图像'
}, {
icon: 'noticefill',
color: 'olive',
badge: 22,
name: '通知'
}, {
icon: 'upstagefill',
color: 'cyan',
badge: 0,
name: '排行榜'
}, {
icon: 'clothesfill',
color: 'blue',
badge: 0,
name: '皮肤'
}, {
icon: 'discoverfill',
color: 'purple',
badge: 0,
name: '发现'
}, {
icon: 'questionfill',
color: 'mauve',
badge: 0,
name: '帮助'
}, {
icon: 'commandfill',
color: 'purple',
badge: 0,
name: '问答'
}, {
icon: 'brandfill',
color: 'mauve',
badge: 0,
name: '版权'
}],
gridCol:3,
skin: false
},</code></pre>
<pre><code class="language-html"><view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
<view class="cuIcon-{{item.icon}} text-{{item.color}}">
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
<block wx:if="{{item.badge!=1}}">{{item.badge>99?"99+":item.badge}}</block>
</view>
</view>
<text>{{item.name}}</text>
</view>
</view></code></pre>