赣州微信小程序模板_移动端滑动切换组件封装

日期:2021-01-08 类型:行业动态 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

移动端滑动切换组件封装 vue-swiper-router实例详解       这篇文章主要介绍了移动端滑动切换组件封装 vue-swiper-router实例详解,需要的朋友可以参考下
: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 { pro凡科抠图: { 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; 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实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!