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

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

最终效果

实现

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

})

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

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网