这篇文章主要知识点是关于vue-swiper-router、vue、滑动切换、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书
具体代码如下所述:
<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实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。
Copyright 2018-2020 www.xz577.com 码农之家
版权投诉 / 书籍推广 / 赞助:520161757@qq.com
vue实现滑动切换效果的实例代码
本文实例为大家分享了vue实现滑动时红黄色块左右滑动相应距离,效果如下图 实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量,再相应移动红黄块。 红黄块布局如下 back中包含back-l,back-r左右两块,正常情况下为了隐藏其中一块,子模块需要设置display: inline-block,并且宽度都需要设置width: 100%。父模块中设置white-space: nowrap用于处理两个子模块之间的空白。 template lang=html div class=back @touchstart.prevent=touchStart @touchmove.prevent=touchMove @touchend=touchEnd ref=back div class=back-l ref=left/div div class=back-r ref=right/div /div/template style scoped lang=stylus rel=stylesheet/stylus.back position: fixed width: 100% height: 100px white-space: nowrap .back-l position: relative vertical-align: top display: inline-block width: 100% height: 100% background-color: red .back-r display: inline-block vertical-align: top position: relative width: 100% ……
vue中选项卡点击切换且能滑动切换功能的实现代码
具体代码如下所述: div div class="navlist" ul li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"i{{item.name}}/i /li /ul /div div class="swiper-container swiper_con" div class="swiper-wrapper" !-- 第一个swiper -- div class="swiper-slide" ref="viewBox"1111 /div !-- 第二个swiper -- div class="swiper-slide"2222 /div /div /div /divscript export default { name: "swiper", data() { return { navList:[ {name:'热门答疑'}, {name:'北清状元'} ], nowIndex:0, } }, components:{ }, mounted() { var that=this that.mySwiper = new Swiper('.swiper-container',{ initialSlide:0, autoplay:false, keyboardControl:true, autoHeight:true, observer:true, observeParents:true, onSlideChangeStart:function(){ // console.log(that.mySwiper.activeIndex) that.nowIndex=that.mySwiper.activeIndex } }); // this.getList(); }, methods: { tabClick(index){ this.nowIndex = index this.mySwiper.slideTo(index,1000,false) }, }, created(id){ }}/scriptstyle……