本篇文章给大家带来的内容是关于微信小程序实现一个简单的Tab可滑动的切换方式（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
最近一直在做小程序项目，对于不同需求来说真是烦不胜烦，之前做的订单页来说只需要可点击切换就可以，但是在后期的迭代中提到要求可滑动切换，下面我自己整理了一套比较简单暴力的滑动切换方式，与大家共享一下，下面有效果图。（菜鸟上路，不喜勿喷）：
.wxml
代付款 代发货 待收货 待评价 退款/售后 代付款 代发货 待收货 待评价 退款/售后
.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.js
Page({
/**
* 页面的初始数据
*/
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
})
}
}
})效果图：
weenCompany闻名企业网站系统5.3.0 中英文 GB2312
下载
weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3
在wxml部分其实可以用个wx:for 来做。
相关推荐：
微信小程序实例：轮播图的代码实现与分析
