微信小程序使用 Swiper 组件实现 Tab 选项卡功能代码，复制即用！

一、WXML 代码

<view class="swiper-tab">
   <view class="swiper-tab-item {
      {currentTab == 0 ? 'swiper-tab-item-active' : ''}}" data-current="0" bindtap="changeSwiperTab">页面一view>
   <view class="swiper-tab-item {
      {currentTab == 1 ? 'swiper-tab-item-active' : ''}}" data-current="1" bindtap="changeSwiperTab">页面二view>
view>
<swiper current="{
      {currentTab}}" duration="300" bindchange="swiperTab">
   <swiper-item>
     页面一内容
   swiper-item>
   <swiper-item>
     页面二内容
   swiper-item>
swiper>

二、WXSS 代码

.swiper-tab {
     
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.swiper-tab-item {
     
  width: 50%;
  height: 20px;
  padding: 5px;
}
.swiper-tab-item-active {
     
  border-bottom: orangered 2px solid;
  color: orangered;
}

三、JS 代码

Page({
     
  /**
   * 页面的初始数据
   */
  data: {
     
    currentTab: 0 // 选项卡默认位置
  },
   /**
   * 点击tab菜单切换
   * @param {} e 
   */
  changeSwiperTab: function (e) {
     
    var _this = this;
    if (this.data.currentTab === e.target.dataset.current) {
     
      return false;
    } else {
     
      _this.setData({
     
        currentTab: e.target.dataset.current
      })
    }
  },
  /**
   * 滑动选项卡切换
   */
  swiperTab: function (e) {
     
    var _this = this;
    _this.setData({
     
      currentTab: e.detail.current
    })
  },

四、效果图