選項卡的功能用途有很多地方：例如商品評論的切換，還有文章分類還有各種各樣的切換功能需要用到。這個實現是通過for迴圈，取數值下標的方式來實現切換

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({
 
 /**
 * 頁面的初始資料
 */
 data: {
  tab: [{
   title: '111',id: 0
  },{
   title: '222',id: 1
  },{
   title: '333',id: 3
  },],idx: 0,//預設選中第一項
 
 
 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function (options) {
 
 },// tab
 tab(e) {
  let that = this;
  let index = e.currentTarget.dataset.index;
  that.setData({
   idx: index,})
 
 }
})

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。