vue蒙層滑動穿透問題

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章