如何實(shí)現(xiàn)小程序tab欄下劃線動(dòng)畫(huà)效果
本文主要介紹了如何實(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值。
- 微信小程序 Tab頁(yè)切換更新數(shù)據(jù)
- 微信小程序 tabs選項(xiàng)卡效果的實(shí)現(xiàn)
- 微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
- 微信小程序?qū)崿F(xiàn)tab切換效果
- 微信小程序 實(shí)現(xiàn)tabs選項(xiàng)卡效果實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)tab和swiper切換結(jié)合效果
- 微信小程序tabBar用法實(shí)例詳解
- 微信小程序自定義tab實(shí)現(xiàn)多層tab嵌套功能
- 微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果
- 微信小程序?qū)崿F(xiàn)tab左右切換效果
相關(guān)文章
JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下2015-07-07Elasticsearch工具cerebro的安裝與使用教程
這篇文章主要介紹了Elasticsearch工具cerebro的安裝與使用教程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03JS?中的URLSearchParams?對(duì)象操作(以對(duì)象的形式上傳參數(shù)到url)
這篇文章主要介紹了JS中URLSearchParams的基本用法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12CommonJS與ES6?Module的使用區(qū)別分析
這篇文章主要為大家介紹了CommonJS與ES6?Module的使用區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04JavaScript實(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-03echarts圖表設(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-12layui實(shí)現(xiàn)form表單同時(shí)提交數(shù)據(jù)和文件的代碼
今天小編就為大家分享一篇layui實(shí)現(xiàn)form表單同時(shí)提交數(shù)據(jù)和文件的代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10IE瀏覽器下JS腳本提交表單后,不能自動(dòng)提示問(wèn)題解決方法
這篇文章主要介紹了IE瀏覽器下JS腳本提交表單后,不能自動(dòng)提示問(wèn)題解決方法,涉及IE瀏覽器配置與javascript事件處理操作技巧,需要的朋友可以參考下2019-06-06javascript的switch用法注意事項(xiàng)分析
這篇文章主要介紹了javascript的switch用法注意事項(xiàng),實(shí)例分析了switch語(yǔ)句進(jìn)行判定的原理與使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02