vue页面滑动后跳转另一个页面，返回时让页面保持在原有位置

方案选择

最近在做一个项目，首页有很多条数据，所以想要让用户在跳转到另一个页面后再返回首页时，保持在原有的高度，使用了keepAlive加上activated钩子，也会出现很多其他问题，因为首页是下拉加载数据，还有很多其他判断，修改起来比较麻烦，所以放弃了用keepAlive的方案

将要跳转的页面做成组件

选择另一个方案，将跳转的页面做成组件，这样就不存在需要保存数据等问题，当显示组件时，将组件设为fixed定位，overflow-y:scroll，这么做有2个要注意的地方

1.滑动动组件时，主页面也跟着滚动(当滚动到底部的时候，如果手势是继续向下滑，要阻止原生事件，即不让他继续滑动)

2.用户在组件页面展示时，点击返回，以为会跳回到主页，结果却跳到上一个页面，因为组件只是通过v-if指令来切换显示，history不会进行缓存

ios上，设置组件的高度为100%，overflow-y为scroll时，scroll会卡顿，因此要使用-webkit-overflow-scrolling这个属性
组件定位

height: 100%;
overflow-y:scroll;
position: fixed;
left:0;
top:0;
width:100%;
-webkit-overflow-scrolling:touch; // 这一行是解决ios滑动卡顿
z-index: 9999;

解决问题

Q1. 滑动组件时，如何阻止主页面跟着滑动？

方案1: vue的 @touchmove.prevent.stop="xx"

使用这个方案，组件层和主页层都无法滚动，因此这个方案不适用于这里的需求

参考文章：

vue用touchmove控制顶层滑动

方案2: 用js代码判断页面滑动的位置

通过组件的滑动高度，组件总高度，页面总高度来判断用户是否滑动到了组件的最底部，如果滑动到最底部，判断用户的手势方向是否是继续向下滑动，如果是继续向下滑动，就去阻止原生事件，也就是e.preventDefault()

这里的代码主要是分为 计算滑动 ， 判断手势的方向 ， 阻止原生事件 ,

计算滑动

代码省略，获取元素clientHeight，注意safari有自己的高度计算，使用 window.pageYOffset 进行计算

判断手势方向

参考文章：
移动端touch事件判断滑动方向
也是判断方向，使用角度来判断

阻止原生滚动

解决问题2

返回时关闭组件,不退出页面

通过history.pushState(null, null, document.URL)结合beforeDestory钩子函数来实现，pushState会向浏览器历史堆栈中增加一条记录，同时改变当前界面的URL地址，但是不会刷新界面

Vue监听返回键关闭弹出层不返回页面

VUE环境下监听物理返回键/浏览器返回按钮

参考文章
js禁止/允许页面滚动，兼容ios
js阻止滚动

相关问题

vue弹窗屏蔽滑动的两种解决方案

滑动穿透终极解决方案

ios上-webkit-overflow-scrolling与position的bug

css如何让滚轮滚动时 不让页面滚动_CSS 定位详解

Vue监听返回键关闭弹出层不返回页面

touch-action(也可以禁止滑动)

2年经验的前端博客

vue返回时保留滚动的位置（配合keepAlive和betterScroll的做法）

vant list组件滚动保留滚动条位置，结合keepAlive

router.beforeEach((to, from, next) => {  
  if (from.meta.keepAlive) {
    const $content = document.querySelector('.content'); // 列表的外层容器
    const scrollTop = $content ? $content.scrollTop : 0;
    console.log('scrollTop', scrollTop)
    from.meta.scrollTop = scrollTop;
  }
  next();
});

https://www.cnblogs.com/huzhuhua/p/11571417.html

betterScroll的github网站

cube-ui官网

vue相关博客

betterScroll的使用