小程序左右滑动切换标签页

index.wxml

<navigation-bar title="滑动切换标签页" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- pages/index/index.wxml -->
<view class="container">
    <!-- 自定义Tab导航 -->
    <view class="tabs">
        <block wx:for="{{tabs}}" wx:key="index" wx:for-item="tab">
            <view 
                bindtap="switchTab"
                data-index="{{index}}"
                class="tab-item {{currentTab === index ? 'active' : ''}}" 
                bindtap="switchTab" 
                data-index="{{index}}"
            >
                {{tab.title}}
            </view>
        </block>
    </view>

    <!-- swiper组件实现滑动 -->
    <swiper 
        bindchange="swiperChange" 
        current="{{currentTab}}"
        circular
    >
        <block wx:for="{{tabs}}" wx:key="index">
            <swiper-item>
                <!-- 这里放置每个Tab对应的内容 -->
                <view class="swiper-content">
                    {{item.content}}
                </view>
                <scroll-view scroll-y style="height: 100%;">
                    <view class="list-item" wx:for="{{item.datalist}}" wx:for-item="content">{{content}}</view>
                    <view class="list-item"></view>
                </scroll-view>
            </swiper-item>
        </block>
    </swiper>
</view>

index.js

Page({
  data: {
      // 初始化Tab数据  
      tabs: [
          {
              title: 'Tab 1',
              content: '这是Tab 1的内容',
              datalist: []
          },
          {
              title: 'Tab 2',
              content: '这是Tab 2的内容',
              datalist: []
          },
          {
              title: 'Tab 3',
              content: '这是Tab 3的内容',
              datalist: []
          }
      ],
      currentTab: 0,
  },

  // 切换Tab  
  switchTab: function (e) {
      const index = e.currentTarget.dataset.index;
      this.setData({
          currentTab: index
      });
  },

  // swiper组件的滑动改变事件  
  swiperChange: function (e) {
      const { current } = e.detail;
      this.setData({
          currentTab: current
      });
  },

  onLoad: function (){
      this.data.tabs.forEach(e => {
          let total = Math.ceil(Math.random() * 20 + 20);
          for(let i = 0; i < total; ++i) {
              e.datalist.push('data: ' + String(i))
          }
          e.content = `共${e.datalist.length}条数据`
      })
      this.setData({tabs: this.data.tabs})
  }
})

index.wxss

page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
}

.container {
  box-sizing: border-box;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.tabs {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 10px;
}

.tab-item {
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
}

.tab-item.active {
  border-bottom-color: #007aff;
  color: #007aff;
}

.swiper-content {
  /* 内容样式，根据需要自定义 */
  text-align: center;
  padding: 20px;
  background-color: #eee;
}

swiper {
  height: 100%;
  width: 100%;
}

.list-item {
  padding: 20px;
  border: 1px solid black;
}
.list-item:last-child{
  padding-bottom: 100rpx;
}

来源：https://blog.csdn.net/metlin/article/details/140595721