web移动端解决ios系统上左滑返回上一页问题
程序员文章站
2023-01-11 20:58:11
web移动端解决ios上左滑返回上一页问题。最近在写移动端项目,应用在微信上面的一个webapp(vue单页面开发),遇到了一个很尴尬的问题,就是有些页面之间的跳转是通过储存在sessionstor...
web移动端解决ios上左滑返回上一页问题。最近在写移动端项目,应用在微信上面的一个webapp(vue单页面开发),遇到了一个很尴尬的问题,就是有些页面之间的跳转是通过储存在sessionstorage中的某些数据,然后进行判断再渲染不同的,通过页面中左上角返回按钮进行修改sessionstorage中的值。但是由于ios自带的左滑返回上一页,导致了不触发左上角的按钮直接返回,从而渲染了错误的页面,所以我通过以下代码阻止了默认返回上一页,不过目前的左滑是退出该webapp返回微信(这给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; } })