小程序的选项卡结合左右滑动

这个是uni小程序的选项卡结合左右滑动

<template>
  <view class="body-view">
    <scroll-view
      class="top-menu-view"
      scroll-x="true"
      :scroll-left="scrollLeft"
    >
      <block v-for="(menuTab, index) in menuTabs" :key="index">
        <view
          class="menu-one-view"
          v-bind:id="'tabNum' + index"
          @click="swichMenu(index)"
        >
          <view :class="[num == index ? 'menu-one-act' : 'menu-one']">
            <view class="menu-one-txt">{{ menuTab.name }}</view>
            <view class="menu-one-bottom">
              <view class="menu-one-bottom-color"></view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    <swiper
      :current="num"
      class="swiper-box-list"
      duration="300"
      @change="swiperChange"
    >
      <block v-for="(swiperDate, index1) in swiperDateList" :key="index1">
        <swiper-item>
          <scroll-view
            class="swiper-one-list"
            scroll-y="true"
            @scrolltolower="loadMore(index1)"
            refresher-enabled="true"
            :refresher-triggered="triggered"
            @refresherrefresh="onRefresh"
          >
            <block>
              <view class="swiper-list-entity">
                <div class="tabCon">
                  {{ index1 }}
                  <!-- 这里面写循环数据 -->
                </div>
              </view>
            </block>
          </scroll-view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>
<script>
import { comBxList } from "@/api/api"; //报修列表
export default {
  data() {
    return {
      scrollLeft: 0,
      listBx: [], //数据
      listCount: {}, //总个数
      bottomText: "",
      loginInfo: {},
      num: 0,
      pageSize: 10, //当前页面数量
      pageNum: 1, //当前页码
      menuTabs: [
        {
          name: "待接单",
        },
        {
          name: "待维修",
        },
        {
          name: "已修复",
        },
        {
          name: "已取消",
        },
      ],
      swiperDateList: [[], [], [], []],
      triggered: false,
      _freshing: false,
    };
  },

  created() {
    console.log(this.num, "num");
    var that = this;
    uni.getStorage({
      key: "logininfo",
      success: function(res) {
        that.loginInfo = res.data;
        // that.List();
      },
    });
  },
  methods: {
    swichMenu: async function(current) {
      console.log(current, "current", this.num, "this.num点击其中一个 menu");
      //点击其中一个 menu
      if (this.num == current) {
        return false;
      } else {
        this.num = current;
        this.setScrollLeft(current);
      }
    },
    swiperChange: async function(e) {
      let index = e.target.current;
      this.num = index;
      this.pageNum = 1;
      // this.List();
      this.setScrollLeft(index);
    },
    setScrollLeft: async function(tabIndex) {
      let leftWidthSum = 0;
      for (var i = 0; i <= tabIndex; i++) {
        let nowElement = await this.getWidth("tabNum" + i);
        leftWidthSum = leftWidthSum + nowElement.width;
      }
      let winWidth = uni.getSystemInfoSync().windowWidth;
      this.scrollLeft = leftWidthSum > winWidth ? leftWidthSum - winWidth : 0;
    },
    getWidth: function(id) {
      //得到元素的宽高
      return new Promise((res, rej) => {
        uni
          .createSelectorQuery()
          .select("#" + id)
          .fields(
            {
              size: true,
              scrollOffset: true,
            },
            (data) => {
              res(data);
            }
          )
          .exec();
      });
    },
  },
};
</script>
<style scoped>
page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  background: rgba(249, 249, 249, 1);
}

.body-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

.top-menu-view {
  display: flex;
  white-space: nowrap;
  width: 100%;
  background-color: #f3f3f3;
  height: 112rpx;
  justify-content: center;
  color: #3c3c3c;
  /* 在这里设置导航条高度 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.top-menu-view .menu-one-view {
  display: inline-block;
  white-space: nowrap;
  height: 100%;
  width: 25%;
  /* width: 50%; */
  /* flex: 1; */
}

.top-menu-view .menu-one-view .menu-one {
  /* 在这里写 单个按钮样式 */
  margin-left: 25rpx;
  margin-right: 25rpx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-menu-view .menu-one-view .menu-one .menu-one-txt {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(154, 154, 154, 1);
  line-height: 40rpx;
}

.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.top-menu-view
  .menu-one-view
  .menu-one
  .menu-one-bottom
  .menu-one-bottom-color {
  width: 60%;
  height: 4rpx;
}

.top-menu-view .menu-one-view .menu-one-act {
  /* 在这里写 单个按钮样式 */
  margin-left: 25rpx;
  margin-right: 25rpx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
  height: 40rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #2e2e2e;
  line-height: 40rpx;
}

.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.top-menu-view
  .menu-one-view
  .menu-one-act
  .menu-one-bottom
  .menu-one-bottom-color {
  width: 60%;
  height: 6rpx;
  background: #2e2e2e;
}

.swiper-box-list {
  flex: 1;
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-top: 112rpx;
}

.swiper-one-list {
  height: 100%;
  width: 100%;
}

.swiper-one-list .swiper-list-entity {
  width: 100%;
  /* height: 112rpx; */
  /* text-align: center; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.tabCon {
  width: 90%;
  padding: 0 5%;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  line-height: 34px;
  flex: 1;
}
</style>