移动端滑动切换组件封装 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 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
AngularJS表单基本操作
Jan 09 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 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
php中几种常见安全设置详解
2010/04/06 PHP
深入php list()函数的详解
2013/06/05 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php函数与传递参数实例分析
2014/11/15 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python实现远程控制电脑
2019/05/23 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
大学校庆策划书
2014/01/31 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书