欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

最終效果

實(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ù)使用及介紹

    這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下
    2015-07-07
  • Elasticsearch工具cerebro的安裝與使用教程

    Elasticsearch工具cerebro的安裝與使用教程

    這篇文章主要介紹了Elasticsearch工具cerebro的安裝與使用教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-03-03
  • JS?中的URLSearchParams?對(duì)象操作(以對(duì)象的形式上傳參數(shù)到url)

    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ū)別分析

    這篇文章主要為大家介紹了CommonJS與ES6?Module的使用區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-04-04
  • JavaScript實(shí)現(xiàn)無(wú)限級(jí)遞歸樹(shù)的示例代碼

    JavaScript實(shí)現(xiàn)無(wú)限級(jí)遞歸樹(shù)的示例代碼

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)無(wú)限級(jí)遞歸樹(shù)的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 微信小程序環(huán)境下將文件上傳到OSS的方法步驟

    微信小程序環(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的解決辦法

    echarts圖表設(shè)置寬度100%結(jié)果為100px的解決辦法

    在開(kāi)發(fā)一個(gè)前端項(xiàng)目時(shí)需要用到Element-ui的el-tabs組件和Echart開(kāi)源庫(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ù)和文件的代碼

    今天小編就為大家分享一篇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瀏覽器下JS腳本提交表單后,不能自動(dòng)提示問(wèn)題解決方法,涉及IE瀏覽器配置與javascript事件處理操作技巧,需要的朋友可以參考下
    2019-06-06
  • javascript的switch用法注意事項(xiàng)分析

    javascript的switch用法注意事項(xiàng)分析

    這篇文章主要介紹了javascript的switch用法注意事項(xiàng),實(shí)例分析了switch語(yǔ)句進(jìn)行判定的原理與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-02-02

最新評(píng)論