微信小程序开发指南

基于ColorUI的组件化页面开发


对话窗口

对话窗口

  • 样式图例

  • 示例代码
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">Modal标题</view>
      <view class="action" bindtap="hideModal">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class="padding-xl">
      Modal 内容。
    </view>
    <view class="cu-bar bg-white justify-end">
      <view class="action">
        <button class="cu-btn line-green text-green" bindtap="hideModal">取消</button>
        <button class="cu-btn bg-green margin-left" bindtap="hideModal">确定</button>

      </view>
    </view>
  </view>
</view>
  • 样式图例

  • 示例代码
<view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">Modal标题</view>
      <view class="action" bindtap="hideModal">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class="padding-xl">
      Modal 内容。
    </view>
    <view class="cu-bar bg-white">
      <view class="action margin-0 flex-sub text-green " bindtap="hideModal">
        <text class="cuIcon-moneybag"></text>微信支付</view>
      <view class="action margin-0 flex-sub text-green solid-left" bindtap="hideModal">取消</view>
      <view class="action margin-0 flex-sub  solid-left" bindtap="hideModal">确定</view>
    </view>
  </view>
</view>

页面列表

ITEM_HTML