微信小程序实现一个简单的Tab可滑动的切换方式（代码）

本篇文章给大家带来的内容是关于微信小程序实现一个简单的Tab可滑动的切换方式（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近一直在做小程序项目，对于不同需求来说真是烦不胜烦，之前做的订单页来说只需要可点击切换就可以，但是在后期的迭代中提到要求可滑动切换，下面我自己整理了一套比较简单暴力的滑动切换方式，与大家共享一下，下面有效果图。（菜鸟上路，不喜勿喷）：

.wxml<!--pages/mine/order/order.wxml--><view>.wxss/* pages/mine/order/order.wxss */.swiper-tab {width: 100%;border-bottom: 2rpx solid #ccc;text-align: center;height: 88rpx;line-height: 88rpx;display: flex;flex-flow: row;justify-content: space-between;}.swiper-tab-item {width: 30%;color: #434343;font-size: 28rpx;}.active {color: #f65959;border-bottom: 4rpx solid #f65959;}swiper {text-align: center;background-color: #fff}.js// pages/mine/order/order.jsPage({/*** 页面的初始数据*/data: {currentTab: 0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},//滑动切换swiperTab: function (e) {this.setData({currentTab: e.detail.current});},//点击切换clickTab: function (e) {if (this.data.currentTab === e.target.dataset.current) {return false;} else {this.setData({currentTab: e.target.dataset.current})}}})效果图：

在wxml部分其实可以用个wx:for 来做。

相关推荐：微信小程序实例：轮播图的代码实现与分析

微信小程序中底部导航栏的实现代码以上就是微信小程序实现一个简单的Tab可滑动的切换方式（代码）的详细内容，更多请关注小潘博客其它相关文章！