这篇文章主要为大家详细介绍了小程序tab实现页面切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序tab实现页面切换的具体代码，供大家参考，具体内容如下
.wxml
待接收(0)
处理中(1)
已完成(1)
{{currentIndex}} {{currentIndex}} {{currentIndex}}
.wxss
page{ width: 100%; height: 100%; } .container { height: 100%; min-height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .title { width: 100%; height: 88rpx; background: white; display: flex; align-items: center; justify-content: space-around; } .titleSel { width: 33%; color: #5f6fee; font-size: 32rpx; display: flex; flex-direction: column; align-items: center; } .titleUnsel { color: #858fab; font-size: #858fab; } .headerLineSel { background: #5f6fee; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .headerLineUnsel { background: #fff; height: 6rpx; width: 40rpx; position: relative; margin-top: 10rpx; } .colors{ width: 100%; height: 100%; } .colors1{ width: 100%; height: 100%; background-color: royalblue; } .colors2{ width: 100%; height: 100%; background-color: salmon; } .colors3{ width: 100%; height: 100%; background-color: seagreen; }.js
data: { currentIndex: 0, }, //用户点击tab时调用 titleClick: function (e) { let currentPageIndex = this.setData({ //拿到当前索引并动态改变 currentIndex: e.currentTarget.dataset.idx }) console.log(e.currentTarget.dataset.idx) },以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是小程序tab实现页面切换的详细内容，更多请关注0133技术站其它相关文章！
