微信小程序开发指南

基于ColorUI的组件化页面开发


全屏抽屉

<h1>全屏抽屉</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=b282a3a431436550a3ccbabf4938a4c0&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html"> &lt;view class='padding margin text-center'&gt; &lt;view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="showModal" data-target="viewModal"&gt; 打开抽屉 &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg"&gt; &lt;view class="cu-item arrow" wx:for="{{20}}" wx:key="index"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-github text-grey"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;{{index +1}}&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class='padding margin text-center'&gt; &lt;view class='cu-btn bg-green lg block shadow radius margin-xl' bindtap="showModal" data-target="viewModal"&gt; 打开抽屉 &lt;/view&gt; &lt;/view&gt; &lt;/scroll-view&gt; &lt;view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap="hideModal"&gt; &lt;text class="cuIcon-pullright"&gt;&lt;/text&gt; &lt;/view&gt; &lt;scroll-view scroll-y class="DrawerWindow {{modalName=='viewModal'?'show':''}}"&gt; &lt;view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg"&gt; &lt;view class="cu-item arrow" wx:for="{{20}}" wx:key="index"&gt; &lt;view class="content"&gt; &lt;text class="cuIcon-github text-grey"&gt;&lt;/text&gt; &lt;text class="text-grey"&gt;{{index +1}}&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML