微信小程序开发指南

基于ColorUI的组件化页面开发


全屏抽屉

全屏抽屉

  • 样式图例

  • 示例代码
    <view class='padding margin text-center'>
                <view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="showModal" data-target="viewModal">
                    打开抽屉
                </view>
            </view>
            <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
                <view class="cu-item arrow" wx:for="{{20}}" wx:key="index">
                    <view class="content">
                        <text class="cuIcon-github text-grey"></text>
                        <text class="text-grey">{{index +1}}</text>
                    </view>
                </view>
            </view>

            <view class='padding margin text-center'>
                <view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="showModal" data-target="viewModal">
                    打开抽屉
                </view>
            </view>
        </scroll-view>
        <view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap="hideModal">
            <text class="cuIcon-pullright"></text>
        </view>
        <scroll-view scroll-y class="DrawerWindow {{modalName=='viewModal'?'show':''}}">
            <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
                <view class="cu-item arrow" wx:for="{{20}}" wx:key="index">
                    <view class="content">
                        <text class="cuIcon-github text-grey"></text>
                        <text class="text-grey">{{index +1}}</text>
                    </view>
                </view>
            </view>

页面列表

ITEM_HTML