如何實現(xiàn)小程序tab欄下劃線動畫效果
更新時間：2019年05月18日 11:47:20 作者：隨她
這篇文章主要介紹了如何實現(xiàn)小程序tab欄下劃線動畫效果,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了如何實現(xiàn)小程序tab欄下劃線動畫效果，分享給大家，具體如下：
最終效果
實現(xiàn)
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)
}
})
上面代碼可以實現(xiàn)效果，這里面最重要的就是通過 changeTab方法獲取有tabtrue這個class的標(biāo)簽,獲取到標(biāo)簽的left值。
相關(guān)文章
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個方法技巧,需要的朋友可以參考下2015-07-07
Elasticsearch工具cerebro的安裝與使用教程
這篇文章主要介紹了Elasticsearch工具cerebro的安裝與使用教程,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
JS?中的URLSearchParams?對象操作(以對象的形式上傳參數(shù)到url)
這篇文章主要介紹了JS中URLSearchParams的基本用法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
CommonJS與ES6?Module的使用區(qū)別分析
這篇文章主要為大家介紹了CommonJS與ES6?Module的使用區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了JavaScript實現(xiàn)無限級遞歸樹的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法
在開發(fā)一個前端項目時需要用到Element-ui的el-tabs組件和Echart開源庫,當(dāng)兩者嵌套使用時,我給Echart中的圖表寬度設(shè)置為了100%,但是實際的寬度卻只有100px,這篇文章主要給大家介紹了關(guān)于echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法,需要的朋友可以參考下2022-12-12
layui實現(xiàn)form表單同時提交數(shù)據(jù)和文件的代碼
今天小編就為大家分享一篇layui實現(xiàn)form表單同時提交數(shù)據(jù)和文件的代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了IE瀏覽器下JS腳本提交表單后，不能自動提示問題解決方法,涉及IE瀏覽器配置與javascript事件處理操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了javascript的switch用法注意事項,實例分析了switch語句進(jìn)行判定的原理與使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02