选项卡的功能用途有很多地方：例如商品评论的切换，还有文章分类，还有各种各样的切换功能需要用到。这个实现是通过for循环，取数值下标的方式来实现切换test.wxml

{{item.title}}

1111
222
333

{{item.title}}

1111
222
333test.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;
}
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,
})

}
})
//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,
})

}
})为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。《微信小程序开发教程》以上就是本文的全部内容，希望对大家的学习有所帮助。