微信小程序开发指南

基于ColorUI的组件化页面开发


宫格列表

宫格列表

  • 样式图例 (3列、4列、5列、边框)

  • 示例代码
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
  },
<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>

页面列表

ITEM_HTML