1. 問題:在蒙層上滑動時,會觸發底層的滑動。
2. 解決:
2.1 vue的 @touchmove.prevent 可以用來阻止滑動,但是同時會禁止蒙層內的子元素的滑動事件,如果蒙層內子元素沒有中間滑動需求(如只有點擊需求),就可以用 @touchmove.prevent 實現阻止蒙層滑動穿透問題。
2.2 蒙層設爲fixed懸浮在最上,底部列表設置overflow-y: hidden,對body和html標籤設置相關樣式overflow-y: hidden,這樣就控制住了底部列表滑動問題。
2.3 蒙層空白處點擊事件與中間文字點擊事件處理,防止事件冒泡帶來其他bug。
<div class="ceng" v-if="isCeng" @touchmove.stop.prevent="touchmovehandle">
<button @getuserinfo="getVxUserInfo" open-type="getUserInfo" v-if="!userName" class="btn">點擊微信授權</button>
</div>