1. 程式人生 > 其它 >Taro 3 防止小程式滾動穿透

Taro 3 防止小程式滾動穿透

參考:Taro 3.1 beta 釋出: 開放式架構新增 4 端支援 | Taro 文件 (jd.com)

v3.0 推出後反饋最多的問題之一,就是在 touchmove 事件回撥中呼叫 e.stopPropagation() 並不能阻止滑動穿透。

這是因為 Taro 3 的事件冒泡機制是單獨在小程式邏輯層實現,所有事件都是繫結的 bind 而不是 catch。因此touchmove 事件回撥中呼叫 e.stopPropagation() 只會阻止上層元件的事件回撥觸發,而沒有 catchtouchmove 能阻止滑動穿透的能力。

v3.1 中我們為 View 元件增加了 catchMove 屬性,只要 catchMove 屬性值為 true
,就會使用 catchtouchmove 代替 bindtouchmove 進行事件繫結,從而獲得阻止滑動穿透的能力。 用法: <View class='parent'> <View class='modal' catchMove>滑動 .modal 時,並不會令 .parent 也一起滑動</View> </View>

例項程式碼

<View className="test-scroll">
          <View className="body"catchMove catchTouchMove={this.test = (e)=
>{ e.stopPropagation(); }}> <ScrollView scrollY> </ScrollView> </View> </View>
.test-scroll {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index
: 100; .body { width: 100vw; height: 100vh; scroll-view { width: 100vw; height: 100vh; background-color: rgba(127, 127, 127, .3); } } }
如果覺得文章對您有幫助,希望您能 關注+推薦 哦