小程序?qū)崿F(xiàn)多個選項卡切換
更新時間：2020年06月19日 17:06:30 作者：Rechal_Mei
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多個選項卡切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
選項卡的功能用途有很多地方：例如商品評論的切換，還有文章分類，還有各種各樣的切換功能需要用到。這個實現(xiàn)是通過for循環(huán)，取數(shù)值下標(biāo)的方式來實現(xiàn)切換
test.wxml
<view class='content'>
<view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='key'>{{item.title}}</view>
</view>
<view wx:if='{{idx == 0}}' class='tab1' data-id='0' bindtouchmove="handletouchmove">1111</view>
<view wx:if='{{idx == 1}}' class='tab2' data-id='1' bindtouchmove="handletouchmove">222</view>
<view wx:if='{{idx == 2}}' class='tab3' data-id='2' bindtouchmove="handletouchmove">333</view>
test.wxss
page {
width: 100%;
height: 100%;
}
.content {
width: 100%;
display: flex;
justify-content: space-around;
}
.tab {
width: 30%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #f0f0f0;
padding: 5rpx;
}
.type-item-on {
border-bottom: 4rpx solid #e64340;
color: red;
}
.tab1 {
width: 100%;
height: 100%;
background: orange;
}
test.js
//logs.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
tab: [{
title: '111',
id: 0
},
{
title: '222',
id: 1
},
{
title: '333',
id: 3
},
],
idx: 0, //默認(rèn)選中第一項
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
// tab
tab(e) {
let that = this;
let index = e.currentTarget.dataset.index;
that.setData({
idx: index,
})
}
})
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在這篇文章中,小編將和大家分享18個JavaScript技巧,以及一些你應(yīng)該知道的示例代碼,以編寫簡潔高效的代碼,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
JavaScript數(shù)值數(shù)組排序示例分享
在Javascript中我們已知有兩個可以直接用來進(jìn)行數(shù)組排序的方法reverse()和sort()。其中reverse()是按照反向?qū)τ跀?shù)組進(jìn)行排序的，而sort()是按照正向進(jìn)行排序的。2014-05-05
前段時間在工作中接觸到了文件上傳的內(nèi)容,但業(yè)務(wù)中實現(xiàn)的功能比較簡單,于是我想著能不能使用純原生的方式實現(xiàn)一個大文件的上傳DEMO,從而在本質(zhì)上學(xué)習(xí)大文件上傳的思路,本教程使用純原生的html+node.js實現(xiàn),需要的朋友可以參考下2024-06-06
javascript網(wǎng)頁關(guān)鍵字高亮代碼
非常不錯的關(guān)鍵字高亮代碼，用js實現(xiàn)，這個方法不錯2008-07-07
詳解如何在Javascript中使用Object.freeze()
這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
js利用遞歸與promise 按順序請求數(shù)據(jù)的方法
這篇文章主要介紹了js利用遞歸與promise 按順序請求數(shù)據(jù),需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο笾噙x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
本文為大家介紹下js獲取兄弟、父類等節(jié)點的方法，感興趣的朋友可以參考下2014-01-01
這篇文章主要分享了一段Javascript常用字符串判斷函數(shù)的代碼，基本上常見的字符串判斷都涵蓋在內(nèi)了，非常實用，小伙伴們參考下。2014-12-12
這篇文章主要介紹了微信小程序彈窗禁止頁面滾動的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12