微信小程序开发指南

基于ColorUI的组件化页面开发


导航栏

<h1>默认</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9e175d90285d66d0ecec0b8eb9ca682a&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <h4>js代码</h4> <pre><code class="language-html">Page({ data: { TabCur: 0, scrollLeft:0 }, tabSelect(e) { this.setData({ TabCur: e.currentTarget.dataset.id, scrollLeft: (e.currentTarget.dataset.id-1)*60 }) } })</code></pre> <pre><code class="language-html">&lt;scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}"&gt; &lt;view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap="tabSelect" data-id="{{index}}"&gt; Tab{{index}} &lt;/view&gt; &lt;/scroll-view&gt;</code></pre> <h1>居中</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=1c6dbaf1a1492f777ca6e3575fadccc1&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;scroll-view scroll-x class="bg-white nav text-center"&gt; &lt;view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}"&gt; Tab{{index}} &lt;/view&gt; &lt;/scroll-view&gt;</code></pre> <h1>平分</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=1155497041529af31918b2ee79e733b1&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;scroll-view scroll-x class="bg-white nav"&gt; &lt;view class="flex text-center"&gt; &lt;view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}"&gt; Tab{{index}} &lt;/view&gt; &lt;/view&gt; &lt;/scroll-view&gt;</code></pre> <h1>背景</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8c060f21df4dc55b066886cc02e593e6&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;scroll-view scroll-x class="bg-red nav text-center"&gt; &lt;view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}"&gt; Tab{{index}} &lt;/view&gt; &lt;/scroll-view&gt;</code></pre> <h1>图标</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8211280d1b7749232fc15717574e18f9&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;scroll-view scroll-x class="bg-green nav text-center"&gt; &lt;view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0"&gt; &lt;text class="cuIcon-camerafill"&gt;&lt;/text&gt; 数码 &lt;/view&gt; &lt;view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1"&gt; &lt;text class="cuIcon-upstagefill"&gt;&lt;/text&gt; 排行榜 &lt;/view&gt; &lt;view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2"&gt; &lt;text class="cuIcon-clothesfill"&gt;&lt;/text&gt; 皮肤 &lt;/view&gt; &lt;/scroll-view&gt;</code></pre>

页面列表

ITEM_HTML