小程序tab實(shí)現(xiàn)頁(yè)面切換
更新時(shí)間：2022年07月06日 15:33:59 作者：小雅雅家的小凱凱吖
這篇文章主要為大家詳細(xì)介紹了小程序tab實(shí)現(xiàn)頁(yè)面切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了小程序tab實(shí)現(xiàn)頁(yè)面切換的具體代碼，供大家參考，具體內(nèi)容如下
.wxml
<view class='title'>
? ? ? <view class='titleSel' bindtap='titleClick' data-idx='0'>
? ? ? ? <text>待接收(0)</text>
? ? ? ? <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
? ? ? </view>
? ??
? ? ? <view class='titleSel' bindtap='titleClick' data-idx='1'>
? ? ? ? <text>處理中(1)</text>
? ? ? ? <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
? ? ? </view>
?
? ? ? ? <view class='titleSel' bindtap='titleClick' data-idx='2'>
? ? ? ? <text>已完成(1)</text>
? ? ? ? <hr class="{{2 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
? ? ? </view>
? </view>
?
? <!--內(nèi)容布局-->
? <view class="colors">
? ? ? <view class="colors1" wx:if="{{currentIndex==0}}">
? ? ? {{currentIndex}}
? ? ? </view>
? ? ? ?<view class="colors2" wx:if="{{currentIndex==1}}">
? ? ? ? ? ? ?{{currentIndex}}
? ? ? </view>
? ? ? ?<view class="colors3" wx:if="{{currentIndex==2}}">
? ? ? ? ? ? ?{{currentIndex}}
? ? ? </view>
</view>.wxss
page{
? width: 100%;
? height: 100%;
}
.container {
? height: 100%;
? min-height: 100%;
? display: flex;
? flex-direction: column;
? box-sizing: border-box;
}
?
.title {
? width: 100%;
? height: 88rpx;
? background: white;
? display: flex;
? align-items: center;
? justify-content: space-around;
}
?
.titleSel {
? width: 33%;
? color: #5f6fee;
? font-size: 32rpx;
? display: flex;
? flex-direction: column;
? align-items: center;
}
?
.titleUnsel {
? color: #858fab;
? font-size: #858fab;
}
?
.headerLineSel {
? background: #5f6fee;
? height: 6rpx;
? width: 40rpx;
? position: relative;
? margin-top: 10rpx;
}
?
.headerLineUnsel {
? background: #fff;
? height: 6rpx;
? width: 40rpx;
? position: relative;
? margin-top: 10rpx;
}
?
?
.colors{
? width: 100%;
? height: 100%;
}
?
.colors1{
? width: 100%;
? height: 100%;
? background-color: royalblue;
}
.colors2{
? width: 100%;
? height: 100%;
? background-color: salmon;
}
.colors3{
? width: 100%;
? height: 100%;
? background-color: seagreen;
}.js
data: {
? ? currentIndex: 0,
? ?
? },
?
? //用戶點(diǎn)擊tab時(shí)調(diào)用
? titleClick: function (e) {
? ? let currentPageIndex =
? ? ? this.setData({
? ? ? ? //拿到當(dāng)前索引并動(dòng)態(tài)改變
? ? ? ? currentIndex: e.currentTarget.dataset.idx
? ? ? })
?
? ? ? console.log(e.currentTarget.dataset.idx)
? },以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JS實(shí)現(xiàn)的倒計(jì)時(shí)效果實(shí)例(2則實(shí)例)
這篇文章主要介紹了JS實(shí)現(xiàn)的倒計(jì)時(shí)效果,列舉了兩則JavaScript倒計(jì)時(shí)效果代碼供大家參考,原理基本相似,代碼簡(jiǎn)潔實(shí)用,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了讓JavaScript和其它資源并發(fā)下載的方法,JavaScript并發(fā)下載主要目的在于解決JS加載會(huì)阻礙頁(yè)面呈現(xiàn)的問題,需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細(xì)介紹了JS+Vue實(shí)現(xiàn)三級(jí)全選單選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
淺析JS中對(duì)函數(shù)function的理解(基礎(chǔ)篇)
我們知道，在js中，函數(shù)實(shí)際上是一個(gè)對(duì)象，每個(gè)函數(shù)都是Function類型的實(shí)例，并且都與其他引用類型一樣具有屬性和方法。下面給大家談下對(duì)JS中函數(shù)function的理解，一起看看吧2016-10-10
js HTML5多圖片上傳及預(yù)覽實(shí)例解析（不含前端的文件分割）
這篇文章主要詳細(xì)解析了js HTML5多圖片上傳及預(yù)覽實(shí)例，不含前端的文件分割，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript代碼壓縮對(duì)代碼進(jìn)行一系列優(yōu)化處理,從而減小代碼的體積,提高網(wǎng)頁(yè)的加載速度,JavaScript代碼壓縮的原理包含去除代碼中的空格、注釋、不必要的換行符等無(wú)用字符,壓縮變量名、壓縮函數(shù)名等操作,將一些常見的操作(如+、-、*、/)轉(zhuǎn)換成更短的操作符(如@、^、#、|)2023-12-12
這篇文章主要分析了javascript單線程異步io回調(diào)的特性這個(gè)問題，希望我們整理的內(nèi)容能幫助到你。2017-12-12
超過80%的候選人對(duì)下面這道JS面試題的回答情況連及格都達(dá)不到。這究竟是怎樣神奇的一道JS面試題？他考察了候選人的哪些能力？對(duì)正在讀本文的你有什么啟示？2017-03-03
jquery將標(biāo)簽元素的高設(shè)為屏幕的百分比
這篇文章主要介紹了js將標(biāo)簽元素的高設(shè)為屏幕的百分比,需要的朋友可以參考下2017-04-04