本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、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
    })
  },

四、效果图