温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

移动端滑动切换组件封装 vue-swiper-router的示例分析

发布时间:2021-07-16 14:13:13 阅读:157 作者:小新 栏目:web开发
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍移动端滑动切换组件封装 vue-swiper-router的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

具体代码如下所述:

<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: {
    tabListArray
  },
  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>
  * {
    margin0;
    padding0;
  }
  body {
    height100%;
    width100%;
    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;
    height44px;
    line-height44px;
    flex1;
    height100%;
    background-color#fff;
  }
  .tab-item_active {
    border-bottom3px solid #f90;
  }
  .tab-item_active a {
    color#f90;
  }
  .slideforward-enter-active.slideforward-leave-active {
    position: absolute;
    transition: all .5s;
    transformtranslate3d(0px0px0px);
  }
  .slideforward-enter.slideforward-leave-to {
    position: absolute;
    transformtranslate3d(200px0px0px);
  }
  .slideback-enter-active.slideback-leave-active {
    position: absolute;
    transition: all .5s;
    transformtranslate3d(0px0px0px);
  }
  .slideback-enter.slideback-leave-to {
    position: absolute;
    transformtranslate3d(-200px0px0px);
  }
</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',
   componentPage1
  },
  {
   path'/page2',
   name'Page2',
   componentPage2
  },
  {
   path'/page3',
   name'Page3',
   componentPage3
  },
  {
   path'/page4',
   name'Page4',
   componentPage4
  }
 ]
});
<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的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×