页面切换如何保持位置不变

页面切换如何保持位置不变

老师我想问一下就是切换不同页面的时候怎么保持滚动条位置不变。比如从A页面到B页面,如何再从B页面切换带A页面的时候保持A页面滚动条位置不变呢,滚动条我用的是swiper做的

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕言 2020-05-22 15:14:26

同学你好,是会把主页的位置弄混的。可以在home/index.vue文件中用localstorage存储swiper平移的距离。

代码参考:
http://img1.sycdn.imooc.com//climg/5ec77abd09ed0c1809130169.jpg

http://img1.sycdn.imooc.com//climg/5ec77b7b09b4322007180391.jpghttp://img1.sycdn.imooc.com//climg/5ec77afe095e0b1606970550.jpg

祝学习愉快~

好帮手慕星星 2020-05-20 18:03:14

同学你好,可以在scroll组件的滚动停止方法中用localstorage存储swiper平移的距离。定义一个方法,设置swiper平移距离。在home组件中,监听路由,切换到首页的时候获取存储的数据调用方法设置。例如:

sroll组件的滚动停止事件中:

http://img1.sycdn.imooc.com//climg/5ec4fc52092fd74008230228.jpg

定义方法

http://img1.sycdn.imooc.com//climg/5ec4fffe098f091b09910349.jpg

监听路由:

http://img1.sycdn.imooc.com//climg/5ec5001b092dc6ee06270419.jpg

自己测试下,祝学习愉快!

  • 但是这样的话其他页面也有滚动条,他们滑动的时候也会把位置放到内存,不会把主页的位置弄混了吗
    2020-05-21 21:05:56
好帮手慕星星 2020-05-20 11:34:23

同学你好,一般情况下滚动位置是不变的。例如从首页中的商品点击进入详情页,返回之后首页的滚动条的位置不变,因为首页组件内容没有进行更新。

祝学习愉快!

  • 老师我指的是之前商城那个项目,切换tabbar的时候从分类页到首页 首页的滚动条位置会回到顶部,本来我续费花钱是为了提交作业批改的,结果你们改版了╯▂╰
    2020-05-20 12:31:12
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师