zoukankan      html  css  js  c++  java
  • 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);
                }
            }
        }
    如果觉得文章对您有帮助,希望您能 关注+推荐 哦
  • 相关阅读:
    iOS开发之窗口和视图
    GCD
    禁止非法用户登录综合设置
    大数减法(C++实现)
    大数加法(C++实现)
    迷宫问题 (BFS ➕输出路径)
    Pots (BFS ➕ 输出路径)
    Shuffle'm Up (map ➕ BFS)
    Prime Path (BFS)
    速算24点
  • 原文地址:https://www.cnblogs.com/xiaqiuchu/p/14988978.html
Copyright © 2011-2022 走看看