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);
            }
        }
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM