小程序怎么打出横线效果_实现小程序tab栏下划线动画效果

最终效果

第一种实现(只改变left值)

wxml

{ {item}}

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

})

th