<view class='tab'>
<view class='list'>
<view wx:for="{{nav}}" bindtap="nav" class="{{navIdx==index?'active':''}}" data-index="{{index}}">{{item}}</view>
</view>
<view class="line" style="width:{{100/nav.length}}%;transform:translateX({{100*navIdx}}%);"></view>
</view>
.tab{position: relative;height: 80rpx;line-height: 80rpx;}
.list{display: flex;justify-content: space-around;}
.active{color: red;}
.line{position: absolute;bottom: 0;left: 0;height: 4rpx;background: red;transition: all .3s ease-out .1s;}
Page({
data: {
navIdx:0,
nav: ['选项卡', '选项卡', '选项卡', '选项卡'],
},
nav:function(e){ //设置选项卡选中索引
this.setData({
navIdx: e.currentTarget.dataset.index,
})
},
})
2018-08-06-11-14-28
