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


Posted in Javascript onNovember 25, 2018

具体代码如下所述:

<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实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
js date 格式化
Feb 15 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
详解vue高级特性
Jun 09 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 #Javascript
vue中tab选项卡的实现思路
Nov 25 #Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 #Javascript
vscode 开发Vue项目的方法步骤
Nov 25 #Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 #Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 #Javascript
vue组件实践之可搜索下拉框功能
Nov 25 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php自定义hash函数实例
2015/05/05 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python基础教程之匿名函数lambda
2017/01/17 Python
详解Python中的四种队列
2018/05/21 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python实现一组典型数据格式转换
2018/12/15 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python中的self用法详解
2019/08/06 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
旷课检讨书500字
2014/10/14 职场文书
2014年技术部工作总结
2014/12/12 职场文书
力克胡哲观后感
2015/06/10 职场文书
员工规章制度范本
2015/08/07 职场文书
检讨书格式
2019/04/25 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
javascript对象3个属性特征
2021/11/17 Javascript
Python3的进程和线程你了解吗
2022/03/16 Python