如何实现小程序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实现自定义风格的滑动条实现代码
Apr 26 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
微信小程序结合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 多行多列显示
2009/08/15 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
美国折扣网站:jClub
2017/08/07 全球购物
校园新闻广播稿
2014/01/10 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
年会邀请函范文
2015/01/30 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL