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