移动端滑动切换组件封装 vue-swiper-router实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3552字，纯文字阅读大概需要6分钟。

内容图文

具体代码如下所述：

<strong>组件部分</strong>
<template>
  <div class="main">
    <div class="page-tab">
      <div 
        :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'"
        v-for='(item, index) in tabList'
        :key="index">
        <router-link 
          mode="out-in"
          :to="item.path">{{item.name}}
        </router-link>
      </div>    
    </div>
    <transition :name="slideDirection">
      <slot>
      </slot> 
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    tabList: Array
  },
  mounted() {
    this.nowPath = this.$route.path;
    this.initTouchedEvent();
  },
  data() {
    return {
      tabSwiper: {},
      slideDirection: 'slideforward',
      nowPath: '',
      startX: '',
      startY:''
    };
  },
  methods: {
    touchedstartHandler(e) {
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;
    },
    touchendHandler(e) {
      let direction = this.startX - e.changedTouches[0].pageX;
      let directionY = this.startY - e.changedTouches[0].pageY;
      let nowRouteIndex = 0;
      this.tabList.forEach((v, index) => {
        if (v.path == this.nowPath) {
          nowRouteIndex = index;
        }
      });
      var disXY = Math.abs(direction)>Math.abs(directionY);
      if (disXY&&direction >= 0 && nowRouteIndex < this.tabList.length - 1) {
        //设置向前动画
        this.slideDirection = 'slideforward';
        this.$router.push({'path': this.tabList[nowRouteIndex + 1].path});
      } 
      if (disXY&&direction < 0 && nowRouteIndex > 0) {
        //设置向后动画
        this.slideDirection = 'slideback';
        this.$router.push({'path': this.tabList[nowRouteIndex - 1].path});
      }
    },
    initTouchedEvent() {
      this.$el.addEventListener('touchstart', this.touchedstartHandler.bind(this));
      this.$el.addEventListener('touchend', this.touchendHandler.bind(this));
    },
  },
  watch: {
    '$route' (to, from) {
      this.nowPath = to.path;
    }
  }
};
</script>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100%;
    width: 100%;
    background-color: #fbf9fe;
  }
  a {
    color: #333;
    text-decoration: none;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page-tab {
    display: flex;
    justify-content: center;
  }
  .tab-item {
    text-align: center;
    align-items: center;
    height: 44px;
    line-height: 44px;
    flex: 1;
    height: 100%;
    background-color: #fff;
  }
  .tab-item_active {
    border-bottom: 3px solid #f90;
  }
  .tab-item_active a {
    color: #f90;
  }
  .slideforward-enter-active, .slideforward-leave-active {
    position: absolute;
    transition: all .5s;
    transform: translate3d(0px, 0px, 0px);
  }
  .slideforward-enter, .slideforward-leave-to {
    position: absolute;
    transform: translate3d(200px, 0px, 0px);
  }
  .slideback-enter-active, .slideback-leave-active {
    position: absolute;
    transition: all .5s;
    transform: translate3d(0px, 0px, 0px);
  }
  .slideback-enter, .slideback-leave-to {
    position: absolute;
    transform: translate3d(-200px, 0px, 0px);
  }
</style>
<strong>router部分</strong>
import Vue from 'vue';
import Router from 'vue-router';
import Page1 from '@/pages/page1/index';
import Page2 from '@/pages/page2/index';
import Page3 from '@/pages/page3/index';
import Page4 from '@/pages/page4/index';
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'index',
   component: Page1
  },
  {
   path: '/page2',
   name: 'Page2',
   component: Page2
  },
  {
   path: '/page3',
   name: 'Page3',
   component: Page3
  },
  {
   path: '/page4',
   name: 'Page4',
   component: Page4
  }
 ]
});
<strong>调用组件部分</strong>
<template>
 <div id="app">
   <TabPages 
         :tab-list='tabList'>
     <router-view/>
   </TabPages>
 </div>
</template>
<script>
import TabPages from './components/index';
export default {
 name: 'app',
 data() {
   return {
    tabList: [{
      name: 'tab1',
      path: '/'
    }, {
      name: 'tab2',
      path: '/page2'
    }, {
      name: 'tab3',
      path: '/page3'
    }, {
      name: 'tab4',
      path: '/page4'
    }]
   }
 },
 components: {
   TabPages
 }
}
</script>
<style>
</style>

完整代码 --> 代码地址    移动端滑动切换   

 总结

以上所述是小编给大家介绍的移动端滑动切换组件封装 vue-swiper-router实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

内容总结

以上是互联网集市为您收集整理的移动端滑动切换组件封装 vue-swiper-router实例详解全部内容，希望文章能够帮你解决移动端滑动切换组件封装 vue-swiper-router实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---