纯js实现移动端tab滑屏，切屏效果，类似移动端首页左右切换页面

vue js 移动端tab滑屏，手指滑动，切屏，代码直接复制vue文件可看效果

<!--
 * @Description:
 * @Author: chenzel
 * @Date: 2020-12-23 10:09:30
 * @LastEditTime: 2021-08-19 18:20:40
 * @LastEditors: chenzel
 -->
<template>
   <div>
      <div id="apps">
        <nav>
          <p
            v-for="(item,$index) in arrs"
            :key="$index"
            @click="toggle($index)"
            :class="{active:$index==active}"
          >{{item}}</p>
        </nav>
      </div>
    <div
        class="back"
        @touchstart.prevent="touchStart"
        @touchmove.prevent="touchMove"
        @touchend="touchEnd"
        ref="back"
      >
        <div class="backbg" style="background:red"></div>
        <div class="backbg" style="background:blue"></div>
        <div class="backbg" style="background:yellow"></div>
        <div class="backbg" style="background:pink"></div>
        <div class="backbg" style="background:orange"></div>
        <div class="backbg" style="background:white"></div>
        <div class="backbg" style="background:grey"></div>
      </div>
  </div>
</template>
<script>
import More from './More'

export default {
  name: "newmore",
  components: {
    More
  },
  data() {
     return {
      active: 0,
      currentPlay: 0,
      percent: 0,
      arrs: ["菜单1", "菜单2", "菜单3", "菜单3",'菜单5','菜单6','菜单7']
    };
  },
  created() {
    this.touch = {}
  },
  mounted(){
    
  },
  destroyed(){
   
  },
  activated() {
  
  },
  methods: {
      toggle(index) {
        this.active = index;
      },
      touchEnd() {
        let offsetWidth;
        //当前为红色，滑动占比小于-0.1则切换，否则回到原位置
        if(this.currentPlay === 0&&this.percent>0) return 
        if(this.currentPlay === this.arrs.length-1&&this.percent<0) return 
        if (this.percent < -0.35) {
          this.currentPlay += 1;
          this.active+=1;
          offsetWidth = -window.innerWidth*this.currentPlay;
        } else if (this.percent > 0.35) {
            this.active-=1;
            this.currentPlay -= 1;
            offsetWidth = -window.innerWidth*this.currentPlay;
         }else{
            offsetWidth = -window.innerWidth*this.currentPlay;
         }
        //这里的transform是针对最开始的位置而言，而不是移动过程中的位置
        this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`;
        this.$refs.back.style["transitionDuration"] = 5;
      },
      touchStart(e) {
      const touch = e.touches[0];
      this.touch.startX = touch.pageX;
      this.touch.startY = touch.pageY	;
      },
      touchMove(e) {
        const touch = e.touches[0];
        //横向和纵向偏离位置
        const deltaX = touch.pageX - this.touch.startX;
        const deltaY = touch.pageY - this.touch.startY;
        if (Math.abs(deltaY) > Math.abs(deltaX)) {
          return;
        }
        if(this.currentPlay === 0&&deltaX>0) return 
        if(this.currentPlay === this.arrs.length-1&&deltaX<0) return 
        var left=-window.innerWidth*this.currentPlay;
        var offsetWidth = left + deltaX;
        //记录滑动的距离占屏幕宽度的百分比，如果滑动太少则不切换
        this.percent = deltaX / window.innerWidth;
        console.log(this.percent)
        //动画中滑块的移动
        this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`;
        //设置动画时间
        this.$refs.back.style["transitionDuration"] = 5;
      },
      toggle(index) {
        this.active = index;
        var offsetWidth = -window.innerWidth*index;
        this.currentPlay = index;
        //这里的transform是针对最开始的位置而言，而不是移动过程中的位置
        this.$refs.back.style["transform"] = `translate3d(${offsetWidth}px,0,0)`;
    },
  }
};
</script>
<style  lang="scss" scoped >
#apps{ width: 100%; overflow:hidden; } 
#apps nav{ padding: 0 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: middle; -ms-flex-align: middle; align-items: middle; overflow: auto; } 
#apps p{ text-align: center; font-size: 16px; -ms-flex-negative: 0; flex-shrink: 0; padding: 10px; margin: 5px; }
#apps p.active{ color: #ffff00; background-color: #000000; }
.back {
  position: fixed;
  width: 100%;
  height: 100px;
  white-space: nowrap;
  .backbg {
    position: relative;
    vertical-align: top;
    display:inline-block;
    width: 100%;
    height: 100%;
    background-color: red;
  }
}
</style>