微信小程序开发指南

基于ColorUI的组件化页面开发


对话窗口

<h1>对话窗口</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=657a8d50f4f56892c840893a3ce18853&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="cu-modal {{modalName=='DialogModal1'?'show':''}}"&gt; &lt;view class="cu-dialog"&gt; &lt;view class="cu-bar bg-white justify-end"&gt; &lt;view class="content"&gt;Modal标题&lt;/view&gt; &lt;view class="action" bindtap="hideModal"&gt; &lt;text class="cuIcon-close text-red"&gt;&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-xl"&gt; Modal 内容。 &lt;/view&gt; &lt;view class="cu-bar bg-white justify-end"&gt; &lt;view class="action"&gt; &lt;button class="cu-btn line-green text-green" bindtap="hideModal"&gt;取消&lt;/button&gt; &lt;button class="cu-btn bg-green margin-left" bindtap="hideModal"&gt;确定&lt;/button&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e5c4a3152fa2dba6c650309eb60e3557&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="cu-modal {{modalName=='DialogModal2'?'show':''}}"&gt; &lt;view class="cu-dialog"&gt; &lt;view class="cu-bar bg-white justify-end"&gt; &lt;view class="content"&gt;Modal标题&lt;/view&gt; &lt;view class="action" bindtap="hideModal"&gt; &lt;text class="cuIcon-close text-red"&gt;&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-xl"&gt; Modal 内容。 &lt;/view&gt; &lt;view class="cu-bar bg-white"&gt; &lt;view class="action margin-0 flex-sub text-green " bindtap="hideModal"&gt; &lt;text class="cuIcon-moneybag"&gt;&lt;/text&gt;微信支付&lt;/view&gt; &lt;view class="action margin-0 flex-sub text-green solid-left" bindtap="hideModal"&gt;取消&lt;/view&gt; &lt;view class="action margin-0 flex-sub solid-left" bindtap="hideModal"&gt;确定&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML