h5tab切换，左滑右滑页面跟着切换

 <div
    v-for="(item, index) in statusBtns"
       :key="index"
       class="tab"
       :class="{ active: currentTab === index }"
       @click="switchTab(index,item)"
   >
       {{ item.name }}
   </div>

<div class="content" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
你的列表
</div>

data() {
        let _this = this
        return {
            pickerVisible:'',
            startDate:new Date(),
            time:'',
            searchname:'',
            left_you:true,
            currentTab: 0,
            startX: 0,
            currentTranslateX: 0,
            totalDeltaX: 0, // 用于记录滑动的总距离
            isDragging: false,
            currentIndex:0,
            tabWidth: 0, // 宽度百分比，用于计算滑动位置
            panel:'mails',
            dataList:[],
            dataLists:[],
            tab:'',
            statusBtns: [
                {
                    name: '全部',
                    status: '',
                    isActive: true,
                },
                {
                    name: '创建',
                    status: 10,
                    isActive: false,
                },
                {
                    name: '待执行',
                    status: 20,
                    isActive: false,
                },
                {
                    name: '执行中',
                    status: 30,
                    isActive: false,
                },
                {
                    name: '已离开',
                    status: 40,
                    isActive: false,
                },
                {
                    name: '已完成',
                    status: 50,
                    isActive: false,
                },
            ],
            todayDates:'',//日期
            pageNo: 1,
            pageSize: 2,
            statusActive:'',
            searchNumber:'',
            totalCount: 0,
            pages: 0,
            scrollLeft: 0, // 用于存储当前的滚动位置
          //头部左边按钮
          left: {
            icon: 'navigate_before',
            click() {
              _this.$router.push("/my-work")
            }
          },
          //头部右边按钮
          right: [{
            isShow: false,
          }],
          //高度
          contentHeight: document.body.clientHeight - 70,
          tabHeight: document.body.clientHeight - 106,
          tabContentHeight: document.body.clientHeight - 152,
          docmHeight: document.documentElement.clientHeight, //默认屏幕高度
          showHeight: document.documentElement.clientHeight, //实时屏幕高度
          jsonString:'',
          pressTimer: null,

        }
      },

methods:{
 handleScroll(event) {
        // 获取滚动容器的滚动位置
        this.scrollLeft = event.target.scrollLeft;
        // 在这里你可以添加其他逻辑来处理滚动事件
        console.log('Current scrollLeft:', this.scrollLeft);
        },
        calculateTabWidth() {
        // 假设每个 tab 宽度相等，计算单个 tab 的宽度百分比
        this.tabWidth = 100 / this.statusBtns.length;
        },
        switchTab(index,item) {
            this.currentTab = index;
            this.statusActive = item.status
            console.log( this.statusActive)
            //this.unBindProductTMS() //这个是下面列表数据
            // this.currentTranslateX = -index * this.tabWidth;
        },
	 onTouchStart(event) {
            this.startX = event.touches[0].clientX;
            this.isDragging = true;
            this.totalDeltaX = 0; // 重置总滑动距离
        },
        onTouchMove(event) {
            if (this.isDragging) {
                const currentX = event.touches[0].clientX;
                const deltaX = currentX - this.startX;
                this.totalDeltaX += deltaX; // 累加滑动距离
                // 判断滑动方向并更新状态
                if (deltaX > 0 && this.currentIndex > 0) {
                // 向右滑动，尝试切换到前一个选项卡
                this.left_you = false
                console.log(this.currentIndex,'向右滑动')
                } else if (deltaX < 0 && this.currentIndex < this.statusBtns.length - 1) {
                this.left_you = true
                console.log(this.currentIndex,'向左滑动')
                // 向左滑动，尝试切换到下一个选项卡
                // this.currentIndex = Math.min(this.currentIndex + 1, this.statusBtns.length - 1);
                }
                // this.switchTab(this.currentIndex,this.statusBtns[this.currentIndex])
                // 更新translateX值以反映当前选项卡的位置
                this.currentTranslateX = -this.currentIndex * 100;
            }
        },
        onTouchEnd() {
            this.isDragging = false;
         
            const threshold = 100; // 滑动阈值
            
            if (Math.abs(this.totalDeltaX) < threshold) {
                return
            }
            var scrollContainer = this.$refs.scrollContainer;
            this.currentIndex = Number(this.currentIndex)
            if(this.left_you){
                if(this.currentIndex==this.statusBtns.length-1){
                    this.currentIndex = 0
                    scrollContainer.scrollLeft =0
                }else{
                    this.currentIndex = this.currentIndex+1
                    scrollContainer.scrollLeft += 80;
                }
            }else{
                if(this.currentIndex<=0){
                    this.currentIndex = 0
                    scrollContainer.scrollLeft =0
                }else{
                    this.currentIndex = this.currentIndex-1
                    scrollContainer.scrollLeft -= 80;
                   console.log( this.currentIndex,'ppppppppppp')
                   
                }
            }
            this.totalDeltaX = 0; // 重置总滑动距离
            this.switchTab(this.currentIndex,this.statusBtns[this.currentIndex])
           
        },



}