如何实现小程序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插件分享之气泡形提示控件grumble.js
May 20 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
JavaScript实现音乐播放器
Aug 14 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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
基于Django用户认证系统详解
2018/02/21 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python实现多进程代码示例
2018/10/31 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
三好学生自我鉴定
2013/12/17 职场文书
大学四年规划书范文
2013/12/27 职场文书
生产部主管岗位职责
2014/01/06 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python