小程序tab底部条滑动效果

<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