移动端滑动切换组件封装 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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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操作xml
2013/10/27 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
红米手机抢购的js代码
2014/03/10 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
python中的字典详细介绍
2014/09/18 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python实现银行实战系统
2020/02/26 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
高三自我鉴定范文
2013/10/19 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2014年部门工作总结
2014/11/12 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle