APP + H5 开发,仿照ios体验,实现右滑返回上一页

崔虎

目前开发一个项目,主要用app壳子,内部全部使用H5开发

看到ios中右滑返回上一页的体验性比较好,想在h5中实现

思考一下有几点需要注意:

1.这个监听事件不能在每个子页面下添加,需要在父页面(app.vue)上添加

2.滑动的监听事件:  touchstart,touchmove

3.不能太过灵敏,需要滑动一段距离后,触发返回上一页,否则再点击页面事件会有冲突

<template>
  <div id="app" @touchstart="touchstartApp" @touchmove="touchmoveApp">
    <router-view :key="$route.fullPath" />
  </div>
</template>

  startX: number = 0;
  startY: number = 0;
  moveEndX: number = 0;
  moveEndY: number = 0;

  touchstartApp(e: any) {
    (this.startX = e.targetTouches[0].pageX), (this.startY = e.targetTouches[0].pageY);
  }

  touchmoveApp(e: any) {
    this.moveEndX = e.targetTouches[0].pageX;
    this.moveEndY = e.targetTouches[0].pageY;
    const X = this.moveEndX - this.startX;
    const Y = this.moveEndY - this.startY;
    if (Math.abs(X) > Math.abs(Y) && X > 100) { // 右滑超出一段距离
      if(!sesStorage.getItem('touchmovePro')){
        router.go(-1)
      }
      console.log('left 2 right');
    } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
      // console.log('right 2 left');
    } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      // console.log('top 2 bottom');
    } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      // console.log('bottom 2 top');
    } else {
      // console.log('just touch');
    }
    sesStorage.removeItem('touchmovePro')
  }

添加完了既可以了,但是我发现页面有需要横向滑动的功能

这样的话,每次想要横向滑动的时候,页面就会返回

 

想到一个思路,通过开关思想:当需要左右滑动的功能里添加一个属性,在监听滑动是否返回上一页那块取值,判断是否有这个属性,只要有就不执行返回上一页这个操作

// 需要滑动的组件
<div class="banner_box" id="tabBox" @touchmove="touchmovePro">
    <ul>
        <li
            class="banner_item"
            :class="{bannerActive:index == bannerChooseIndex}"
            @click="bannerEvt(item,index)"
            v-for="(item,index) in bannerList"
            :key="index"
        >
            <span>{{item.value}}</span>
        </li>
    </ul>
 </div>


touchmovePro(){
    sesStorage.setItem('touchmovePro',true)
  }

　　

我只通过 sessionStorage 存取值, 当然要在最后清除这个属性 sesStorage.removeItem('touchmovePro'),防止只要操作左右滑动的功能,就失去优化返回的功能

在哪里进行删除呢,通过冒泡原理,在它的父组件 touchmove事件中删除,这样就实现了,每次操作完左右滑动的功能,及时删除

 

之前有想过一个思路:阻止事件冒泡,但是,在不需要阻止的地方,有需要放开,这样添加的事件就多了,比较麻烦,还是目前这样解决较为简单

 

来源：https://www.cnblogs.com/huangaiya/p/12659129.html