小编给大家分享一下实现小程序tab栏下划线动画效果的案例,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
具体如下:
实现
wxml
<view class='abox'>
<view wx:for="{{title}}" class='{{currentIndex==index?"tabTrue":""}}' bindtap='changeTab' data-aa='{{index}}'>
{{item}}
</view>
<view class='b' ></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值。
看完了这篇文章,相信你对“实现小程序tab栏下划线动画效果的案例”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。