方案选择

最近在做一个项目,首页有很多条数据,所以想要让用户在跳转到另一个页面后再返回首页时,保持在原有的高度,使用了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的使用
图片转载自博客

Logo

前往低代码交流专区

更多推荐