如何实现小程序标签栏下划线动画效果

本文主要介绍了如何实现小程序标签栏下划线动画效果，分享给大家，具体如下：

最终效果

实现

页面结构

view class=' abox ' view wx : for=' { { title } } ' class=' { { CurrentDex==index ' ' tab TRUe ' : ' ' } ' bind tap=' Changetab ' data-aa=' { { index } } ' { { item } }/view view class=' b ' style=' left : { { left } } px '/view wxss。abox { display : flex flex-direction : row；宽度： 100%;证明内容：空间环绕；相对位置：填充-底部： 20 rpx}.tabTrue{ color:红色；}.b { background : red height : 4rpx宽度宽度：64rpx绝对位置：底部： 0；过渡：全。3s线性；}js

页面({ data: { title: ['首页','掘金','思否','知乎]，currentIndex: ' 0 '，left:'' }，ChangeTab :函数(e){//控制台。记录这个。设置数据({ CurrentAnDex : e . CurrentTarget。数据集。aa })这个。changeline(e)}，changeline :函数(){ const query=wx。CreateElectorquery()var _ this=this。选择(' .tab TRUe’).boundingClientRect()。查询。exec()函数(RES){ _ this。setdata({ left : RES[0]).左}) //console.log(res[0]).左)}) }，onLoad:函数(){ this.changeline(1) })上面代码可以实现效果，这里面最重要的就是通过changeTab方法获取有tabtrue这个班级的标签，获取到标签的左边的值。