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

2020-03-21 15:56:20

字体：大中小

来源：转载

供稿：网友

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

最终效果

小程序,tab,下划线,动画

实现

wxml

<view class='abox'>  <view wx:for="{{title}}" class='{{currentIndex==index?"tabTrue":""}}' bindtap='changeTab' data-aa='{{index}}'>   {{item}}    </view>  <view class='b' style="left:{{left}}px"></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;}

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

上一篇：微信小程序实现录音时的麦克风动画效果实例

下一篇：微信小程序select下拉框实现效果