快捷導(dǎo)航

如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫效果

更新時(shí)間：2019年05月18日 11:47:20 作者：隨她

這篇文章主要介紹了如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫效果,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫效果，分享給大家，具體如下：

最終效果

實(shí)現(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: ["首頁(yè)","掘金","思否","知乎"],
  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)
  
 }
})

上面代碼可以實(shí)現(xiàn)效果，這里面最重要的就是通過(guò) changeTab方法獲取有tabtrue這個(gè)class的標(biāo)簽,獲取到標(biāo)簽的left值。

您可能感興趣的文章:

相關(guān)文章

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