APP + H5 开发,仿照ios体验,实现右滑返回上一页
<p>目前开发一个项目,主要用app壳子,内部全部使用H5开发</p><p>看到ios中右滑返回上一页的体验性比较好,想在h5中实现</p>
<p>思考一下有几点需要注意:</p>
<p>1.这个监听事件不能在每个子页面下添加,需要在父页面(app.vue)上添加</p>
<p>2.滑动的监听事件: touchstart,touchmove</p>
<p>3.不能太过灵敏,需要滑动一段距离后,触发返回上一页,否则再点击页面事件会有冲突</p>
<div class="cnblogs_code">
<pre><template>
<div id="app" @touchstart="touchstartApp" @touchmove="touchmoveApp">
<router-view :key="$route.fullPath" />
</div>
</template></pre>
</div>
<div class="cnblogs_code">
<pre>startX: number = 0<span style="color: rgba(0, 0, 0, 1)">;
startY: number </span>= 0<span style="color: rgba(0, 0, 0, 1)">;
moveEndX: number </span>= 0<span style="color: rgba(0, 0, 0, 1)">;
moveEndY: number </span>= 0<span style="color: rgba(0, 0, 0, 1)">;
touchstartApp(e: any) {
(</span><span style="color: rgba(0, 0, 255, 1)">this</span>.startX = e.targetTouches.pageX), (<span style="color: rgba(0, 0, 255, 1)">this</span>.startY = e.targetTouches.pageY);
}
touchmoveApp(e: any) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.moveEndX = e.targetTouches.pageX;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.moveEndY = e.targetTouches.pageY;
const X </span>= <span style="color: rgba(0, 0, 255, 1)">this</span>.moveEndX - <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.startX;
const Y </span>= <span style="color: rgba(0, 0, 255, 1)">this</span>.moveEndY - <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.startY;
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (Math.abs(X) > Math.abs(Y) && X > 100<span style="color: rgba(0, 0, 0, 1)">) { // 右滑超出一段距离
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(!sesStorage.getItem('touchmovePro'<span style="color: rgba(0, 0, 0, 1)">)){
router.go(</span>-1<span style="color: rgba(0, 0, 0, 1)">)
}
console.log(</span>'left 2 right'<span style="color: rgba(0, 0, 0, 1)">);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (Math.abs(X) > Math.abs(Y) && X < 0<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('right 2 left');</span>
} <span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (Math.abs(Y) > Math.abs(X) && Y > 0<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('top 2 bottom');</span>
} <span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (Math.abs(Y) > Math.abs(X) && Y < 0<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('bottom 2 top');</span>
} <span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log('just touch');</span>
<span style="color: rgba(0, 0, 0, 1)"> }
sesStorage.removeItem(</span>'touchmovePro'<span style="color: rgba(0, 0, 0, 1)">)
}</span></pre>
</div>
<p>添加完了既可以了,但是我发现页面有需要横向滑动的功能</p>
<p>这样的话,每次想要横向滑动的时候,页面就会返回</p>
<p><img src="https://img2020.cnblogs.com/blog/1694463/202004/1694463-20200408141101558-641092725.png"></p>
<p> </p>
<p>想到一个思路,通过开关思想:当需要左右滑动的功能里添加一个属性,在监听滑动是否返回上一页那块取值,判断是否有这个属性,只要有就不执行返回上一页这个操作</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">// 需要滑动的组件
<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)
}
</pre>
</div>
<p> </p>
<p>我只通过 sessionStorage 存取值, 当然要在最后清除这个属性 sesStorage.removeItem('touchmovePro'),防止只要操作左右滑动的功能,就失去优化返回的功能</p>
<p>在哪里进行删除呢,通过冒泡原理,在它的父组件 touchmove事件中删除,这样就实现了,每次操作完左右滑动的功能,及时删除</p>
<p> </p>
<p>之前有想过一个思路:阻止事件冒泡,但是,在不需要阻止的地方,有需要放开,这样添加的事件就多了,比较麻烦,还是目前这样解决较为简单</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/huangaiya/p/12659129.html
頁:
[1]