目前开发一个项目,主要用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事件中删除,这样就实现了,每次操作完左右滑动的功能,及时删除
之前有想过一个思路:阻止事件冒泡,但是,在不需要阻止的地方,有需要放开,这样添加的事件就多了,比较麻烦,还是目前这样解决较为简单