這篇文章帶給大家的內容是關於微信小程式實現一個簡單的Tab可滑動的切換方式（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
最近一直在做小程式項目，對於不同需求來說真是煩不勝煩，之前做的訂單頁來說只需要可點擊切換就可以，但是在後期的迭代中提到要求可滑動切換，下面我自己整理了一套比較簡單暴力的滑動切換方式，與大家分享一下，下面有效果圖。 （菜鳥上路，不喜勿噴）：
.wxml
<!--pages/mine/order/order.wxml-->
<view class='order'>
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">代付款</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">代发货</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">待收货</view>
<view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">待评价</view>
<view class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">退款/售后</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
<swiper-item>
<view>代付款</view>
</swiper-item>
<swiper-item>
<view>代发货</view>
</swiper-item>
<swiper-item>
<view>待收货</view>
</swiper-item>
<swiper-item>
<view>待评价</view>
</swiper-item>
<swiper-item>
<view>退款/售后</view>
</swiper-item>
</swiper>
</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.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
})
}
}
})效果圖：
#在wxml部分其實可以用wx:for 來做。
相關推薦：
微信小程式實例：輪播圖的程式碼實作與分析
以上是微信小程式實作一個簡單的Tab可滑動的切換方式（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
