这篇文章主要介绍了如何实现小程序tab栏下划线动画效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了如何实现小程序tab栏下划线动画效果，分享给大家，具体如下：
最终效果
实现
wxml
<view> <view wx:for="{{title}}" bindtap='changeTab' data-aa='{{index}}'> {{item}} </view> <view></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值。
您可能感兴趣的文章: