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


Posted in Javascript onMay 18, 2019

本文主要介绍了如何实现小程序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;
}

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

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
ext jquery 简单比较
Apr 07 Javascript
Date对象格式化函数代码
Jul 17 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
vue解决跨域问题(推荐)
Nov 10 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 #Javascript
Fetch超时设置与终止请求详解
May 18 #Javascript
微信小程序实现搜索历史功能
Mar 26 #Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 #Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 #Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 #Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 #Javascript
You might like
php error_log 函数的使用
2009/04/13 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
python将ip地址转换成整数的方法
2015/03/17 Python
python距离测量的方法
2018/03/06 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python实现小世界网络生成
2019/11/21 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
护理个人求职信范文
2014/01/08 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书