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

互联网 18-8-16

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

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

<!--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       })     }   }    })

效果图：