如何实现小程序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效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JS无限级导航菜单实现方法
Jan 05 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
微信小程序结合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无限分类的类
2007/01/02 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
详解Document.Cookie
2015/12/25 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
在Python中COM口的调用方法
2019/07/03 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
比利时家具购买网站:Home24
2019/01/03 全球购物
Linux操作面试题
2012/05/16 面试题
《争吵》教学反思
2014/02/15 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
广播体操口号
2014/06/18 职场文书