移动端滑动切换组件封装 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 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python 的列表遍历删除实现代码
2020/04/12 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Django Rest framework频率原理与限制
2019/07/26 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python实现猜拳游戏
2020/03/04 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Django url 路由匹配过程详解
2021/01/22 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
英国电子专家:maplin
2019/09/04 全球购物
门卫工作岗位职责
2013/12/17 职场文书
大学新生欢迎词
2014/01/10 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
教师个人读书活动总结
2014/07/08 职场文书
家长高考寄语
2015/02/27 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android