本文主要介紹了如何實現小程序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值。
新聞熱點
疑難解答
