微信小程序里一种简单的 Tab 可滑动切换方式的实现及代码

<!--pages/mine/order/order.wxml-->

<view class=&#39;order&#39;>

  <view class="swiper-tab">

    <view class="swiper-tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="clickTab">代付款</view>

    <view class="swiper-tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="clickTab">代发货</view>

    <view class="swiper-tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="clickTab">待收货</view>

    <view class="swiper-tab-item {{currentTab==3?&#39;active&#39;:&#39;&#39;}}" data-current="3" bindtap="clickTab">待评价</view>

    <view class="swiper-tab-item {{currentTab==4?&#39;active&#39;:&#39;&#39;}}" 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>

/* 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

}

// 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

      })

    }

  }

})