web移动端解决右滑出现空白
最近在写移动端项目，应用在微信上面的一个webapp（vue单页面开发），遇到了一个很尴尬的问题，就是有些页面之间的跳转是通过储存在sessionStorage中的某些数据，然后进行判断再渲染不同的组件，通过页面中左上角返回按钮进行修改sessionStorage中的值。但是由于Ios自带的左滑返回上一页，导致了不触发左上角的按钮直接返回，从而渲染了错误的页面，所以我通过以下代码阻止了默认返回上一
·
有时候在用一些插件时会出现左右滑出现空白部分，由于子元素的宽度大于屏幕本身的宽度导致页面发生收缩情况，添加以下代码解决：
//1.一开始用这段代码，结果发现滚动都失效了，如果页面大于屏幕高度将无法滚动至底部，所以淘汰
// document.addEventListener('touchmove', function(e) {
// e.preventDefault();
// });
//2.改良后的代码，将该代码直接放在index.html文件下即可
let self = this;
document.addEventListener('touchstart', (e) => {
self.moveY = e.targetTouches[0].pageY;
})
document.addEventListener('touchmove', (e) => {
e.preventDefault();
let moveWidth = self.moveY - e.targetTouches[0].pageY;
if (moveWidth !== 0) {
document.body.scrollTop += moveWidth;
}
})
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献9条内容
所有评论(0)