移动端滑动切换组件封装 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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 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日历[测试通过]
2008/03/27 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
用Python编写简单的微博爬虫
2016/03/04 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
基于python历史天气采集的分析
2019/02/14 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Java平台和其他软件平台有什么不同
2015/06/05 面试题
五一服装活动方案
2014/01/11 职场文书
高校教师思想汇报
2014/01/11 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
vue使用echarts实现折线图
2022/03/21 Vue.js