vue页面里,通过右滑返回上一页面,并有两个页面之间切换效果

来源:2-1 幻灯片组件--swiper

慕先生的刀

2019-08-08 11:58:40

老师你好我有个需求就是vue写的移动端项目如何在页面里实现右滑返回上一页面同时有当前页面和上个页面之间的切换效果就像swiper两个slide之间切换效果那种

我开始以为是滑动手势于是引入了hammer.js给页面的右滑事件里写了this.$router.back()它可以实现我右滑返回上一个页面的功能但是没有类似swiper的两个slide切换的效果不能两个页面同时出现并且随着左右滑动的距离长度而自由变化。

于是我还是想到了swiper在官网里我找到了历史导航

http://img.mukewang.com/climg/5d4b9c300001f1cd17841276.jpg

http://img.mukewang.com/climg/5d4b9c9e0001b11509740644.jpg

但是我的所有路由页面跳转都是在router-view里面我不知道如何让每一个页面url都对应一个slide我尝试这样写

http://img.mukewang.com/climg/5d4b9cf70001dae919140332.jpg

可以左右滑动地址栏里的url也有变化但是路由并不跳转。不知道是我写的方法不对还是用swiper实现不了或者是有别的方法

请教下老师如何实现这一功能效果谢谢

写回答

1回答

bbbboom

2019-08-08

把链接放到一个数组里面,然后遍历这个数组,然后写router-link标签,标签这里这个to是要链接的地址,在遍历哪里有一个变量表示。

<router-link  to="遍历的那个链接" ></router-link>

0

0 学习 · 10739 问题

查看课程