小程序實現(xiàn)多個選項卡切換

更新時間：2020年06月19日 17:06:30 作者：Rechal_Mei

這篇文章主要為大家詳細介紹了小程序實現(xiàn)多個選項卡切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

選項卡的功能用途有很多地方：例如商品評論的切換，還有文章分類，還有各種各樣的切換功能需要用到。這個實現(xiàn)是通過for循環(huán)，取數(shù)值下標的方式來實現(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, //默認選中第一項
 
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 
 },
 // tab
 tab(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
  idx: index,
 })
 
 }
})

為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JS使用Expires?max-age判斷緩存過期的瀏覽器實例
這篇文章主要為大家介紹了JS使用Expires?max-age判斷緩存過期的瀏覽器實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
Javascript Ajax異步讀取RSS文檔具體實現(xiàn)
這篇文章主要介紹了Javascript Ajax異步讀取RSS文檔具體實現(xiàn)，有需要的朋友可以參考一下
2013-12-12
Javascript 獲取滾動條位置等信息的函數(shù)
有時為了準確定位一個元素，我們需要獲取滾動條的位置，這種需求經(jīng)常出現(xiàn)在 tooltip 和拖放等應用中，其實這個技術很簡單，關鍵是要考慮瀏覽器的兼容性，本文就是介紹這一問題的解決方法。
2009-09-09
使用JavaScript?定義自己的ajax函數(shù)
這篇文章主要為大家介紹了JavaScript定義ajax函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-11-11
JavaScript Chart 插件整理
前段時間由于工作關系，查找了一些JS的chart插件，以下數(shù)據(jù)采集于2010.4.8。
2010-06-06
JavaScript之Array常見的方法詳解
這篇文章主要為大家介紹了JavaScript之Array常見的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助V
2021-11-11
詳細分析JavaScript中的深淺拷貝
這篇文章主要介紹了JavaScript中的深淺拷貝，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
2020-09-09
詳解多頁應用 Webpack4 配置優(yōu)化與踩坑記錄
這篇文章主要介紹了詳解多頁應用 Webpack4 配置優(yōu)化與踩坑記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
JavaScript數(shù)組去重的幾種方法
這篇文章主要給大家介紹了關于JavaScript數(shù)組去重的幾種方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
微信小程序事件點擊跳轉頁面的五種方法小結
本文主要介紹了微信小程序事件點擊跳轉頁面的五種方法小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07