如何实现小程序tab栏下划线动画效果
更新时间：2019年05月18日 11:47:20 作者：随她
这篇文章主要介绍了如何实现小程序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值。
相关文章
EasyUi中的Combogrid 实现分页和动态搜索远程数据
jquery easyui中的combogrid比较特殊，算是combo和grid的组合，combogrid结合一个可编辑的文本框和下拉数据网格面板，可以让用户迅速找到并选择，又可以进行搜索，展示与当前输入的字符相匹配的数据。下面给大家介绍EasyUi中的Combogrid 实现分页和动态搜索远程数据2016-04-04
下面小编就为大家带来一篇Javascript 一些需要注意的细节(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
现在又想做一个无缝滚动了，所以在网上找啊找，好多都是相同的，而且调试复杂，好多都不能动，也懒得去细看，终于让我发现了这个，希望能帮到别人：2013-06-06
一小段代码，经常出现在面试笔试题中的：统计一个字符串中出现最多的字符的次数，可以是英文或者数字。2010-12-12
判断输入的字数2009-08-08
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
这篇文章主要介绍了JavaScript 双向链表操作,结合实例形式分析了JavaScript双向链表的创建、增加、查找、删除等相关操作技巧,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 setInterval 和 clearInterval 两个重要方法,感兴趣的小伙伴可以了解一下2025-02-02
这篇文章主要介绍了一次记住JavaScript的6个正则表达式方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
这篇文章主要介绍了JavaScript控制网页平滑滚动到指定元素位置的方法,实例分析了javascript操作页面滚动的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论