如何实现小程序tab栏下划线动画效果 2024/11/25 DDR爱好者之家

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

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

webpack 代码分离优化快速指北

微信小程序云开发修改云数据库中的数据方法

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

更新日志

友情链接