<div class="show-content-free">
<pre onclick="hljs.copyCode(event)"><code class="html hljs xml"><ol class="hljs-ln" style="width:975px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'tab'</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'list'</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">"{{nav}}"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"nav"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"{{navIdx==index?'active':''}}"</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">"{{index}}"</span>></span>{{item}}<span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"line"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:{{100/nav.length}}%;transform:translateX({{100*navIdx}}%);"</span>></span><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">view</span>></span></div></div></li></ol></code><div class="hljs-button {2}" data-title="复制"></div></pre>
-
.tab{
position: relative;
height:
80rpx;
line-height:
80rpx;}
-
.list{
display: flex;
justify-content: space-around;}
-
-
.line{
position: absolute;
bottom:
0;
left:
0;
height:
4rpx;
background: red;
transition: all .
3s ease-out .
1s;}
-
-
-
-
nav: [
'选项卡',
'选项卡',
'选项卡',
'选项卡'],
-
-
-
-
navIdx: e.currentTarget.dataset.index,
-
-
-
-
</div>
</div>
</div>