實現小程序tab欄下劃線動畫效果

最終效果

實現

wxml

<view class='abox'>
    <view wx:for="{{title}}" class='{{currentIndex==index?"tabTrue":""}}'  bindtap='changeTab' data-aa='{{index}}'>
      {{item}}
    
    </view>
    <view class='b' style="left:{{left}}px"></view>
</view>

wxss

.abox{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  position: relative;
  padding-bottom: 20rpx;
}

.tabTrue{
  color: red;
}
.b{
  background: red;
  height: 4rpx;
  width:64rpx;
  position: absolute;
  bottom: 0;
  transition: all .3s linear;
}

js

Page({
  data: {
    title: ["首頁","掘金","思否","知乎"],
    currentIndex:"0",
    left:""
  },
  changeTab:function(e){
    //console.log(e)
    this.setData({
      currentIndex: e.currentTarget.dataset.aa
    })
    this.changeline(e)
    
  },
  changeline:function(){
    const query = wx.createSelectorQuery()
    var _this = this
    query.select('.tabTrue').boundingClientRect()
    query.exec(function (res) {
      _this.setData({
        left: res[0].left
      })
      //console.log(res[0].left)
    })
  },
  onLoad: function () {
    
    this.changeline(1)
   
  }
})

上面代碼可以實現效果，這裏面最重要的就是通過 changeTab方法獲取有tabtrue這個class的標籤,獲取到標籤的left值。