微信小程序tab选项卡源码（一）使用于全屏内容、选项卡内容各不相同的场景(支持点击切换、左右滑动切换)

QQ：285679784   欢迎加入博主CSDN资源QQ群799473954(附加信息：CSDN博客)一起学习 !

微信小程序tab选项卡，支持点击切换、左右滑动切换

效果图

tab-01.wxml

<view class="tab-content">
  <!--头部tab切换部分start-->
  <view class="tab-menu">
    <view class="{{currentTab==0?'tab-menu-select':'default'}}" data-current="0" catchtap="switchNav">
      内容
    </view>
    <view class="{{currentTab==1?'tab-menu-select':'default'}}" data-current="1" catchtap="switchNav">
      直播
    </view>
    <view class="{{currentTab==2?'tab-menu-select':'default'}}" data-current="2" catchtap="switchNav">
      资料
    </view>
    <view class="{{currentTab==3?'tab-menu-select':'default'}}" data-current="3" catchtap="switchNav">
      留言
    </view>
    <view class="{{currentTab==4?'tab-menu-select':'default'}}" data-current="4" catchtap="switchNav">
      总结
    </view>
  </view>
  <swiper current='{{currentTab}}' bindchange="tabChange" class='tab-swiper'>
    <block>
      <swiper-item>
        <block>
          内容
        </block>
      </swiper-item>
      <swiper-item>
        <block>
          直播
        </block>
      </swiper-item>
      <swiper-item>
        <block>
          资料
        </block>
      </swiper-item>
      <swiper-item>
        <block>
          留言
        </block>
      </swiper-item>
      <swiper-item>
        <block>
          总结
        </block>
      </swiper-item>
    </block>
  </swiper>
  <!--切换内容部分end-->
</view>

tab-01.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  //tab切换函数，让swiper当前滑块的current的index与tab头部index一一对应
  switchNav: function (e) {
    var index = e.target.dataset.current;
    if (this.data.currentTab == index) {
      return false;
    } else {
      this.setData({
        currentTab: index
      });
    }
  },
  //滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应
  tabChange(e) {
    this.setData({
      currentTab: e.detail.current
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

tab-01.wxss

page {
        height: auto;
}

.tab-swiper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  box-sizing: border-box;
  /* padding: 170rpx 0rpx 0rpx 0rpx; */
  padding: 92rpx 0rpx 0rpx 0rpx;
  z-index: -1;
}

.tab-swiper swiper-item {
  overflow-y: scroll;
}

.tab-content {
  background-color: #fff;
}

.tab-menu {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;
  z-index: 11;
}

.tab-menu view {
  margin: 0rpx auto;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #434343;
}

.tab-menu .tab-menu-select {
  position: relative;
}

.tab-menu .tab-menu-select:after {
  position: absolute;
  left: -7rpx;
  bottom: 0rpx;
  content: "";
  width: 70rpx;
  height: 8rpx;
  background-color: rgb(235, 21, 60);
  border-radius: 4px 4px 0 0;
}