这篇文章主要为大家详细介绍了小程序实现多个选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
选项卡的功能用途有很多地方：例如商品评论的切换，还有文章分类，还有各种各样的切换功能需要用到。这个实现是通过for循环，取数值下标的方式来实现切换
test.wxml
{{item.title}}1111222333
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, }) } })
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是小程序实现多个选项卡切换的详细内容，更多请关注本站其它相关文章！
![[js高手之路]jquery插件开发实战-选项卡详解](https://www.kunjuke.com/file/css/thumb/6.jpg/280-180.jpg)
