实现小程序tab栏下划线动画效果

jiezi

6 年前

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;
}

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 值。

最终效果

实现