欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

web移动端解决ios系统上左滑返回上一页问题

程序员文章站 2022-05-23 21:19:42
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;
      }
    })