移动端滑动切换组件封装 vue-swiper-router
- 更新时间:2020-03-17 09:39:23
- 编辑:邴志学
具体代码如下所述:
<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实现图片预览组件封装与使用
这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
发布时间:2019-09-10
-
vue权限路由实现的方法示例总结
这篇文章主要给大家介绍了关于vue权限路由实现方法的相关资料,文中通过示例代码介绍地方非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
发布时间:2019-07-24
-
前端工程师必备技能:Vue移动开发实战技巧
Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201
大小:122 MBVue实战电子书
-
Vue企业开发实战
本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。
大小:109.6 MBVue.js实战电子书
-
Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统
本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现
大小:132979 MB 项目实战
-
Spring Boot+Vue全栈开发实战
传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序
大小:196.3 MBSpring电子书
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。
大小:186.6 MBWeb前端电子书
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。
大小:26581 MB MVue.js入门
-
水晶石技法VUE 10完全学习手册
《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见
大小:114191 MB VUE10学习手册
-
Vue.js实战
尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅
大小:196.7 MBVue电子书
-
JavaScript+Vue+React全程实例
这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。
大小:59150 MB MJS实例