微信小程序开发指南

基于ColorUI的组件化页面开发


多选窗口

多选窗口

  • 样式图例

  • 示例代码
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap="hideModal">
  <view class="cu-dialog" catchtap>
    <view class="cu-bar bg-white">
      <view class="action text-blue" bindtap="hideModal">取消</view>
      <view class="action text-green" bindtap="hideModal">确定</view>
    </view>
    <view class="grid col-3 padding-sm">
      <view wx:for="{{checkbox}}" class="padding-xs" wx:key="{{index}}">
        <button class="cu-btn orange lg block {{item.checked?'bg-orange':'line-orange'}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> {{item.name}}
          <view class="cu-tag sm round {{item.checked?'bg-white text-orange':'bg-orange'}}" wx:if="{{item.hot}}">HOT</view>
        </button>
      </view>
    </view>
  </view>
</view>

页面列表

ITEM_HTML