uni-app 3.1.22.20210709版本 view内嵌scroll-view下滑不会触发touchmove

uni-app 3.1.22.20210709版本 view内嵌scroll-view下滑不会触发touchmove

示例代码：

<view  
    class="cover-container"  
    :style="[{  
        background: backgroundCover,  
        transform: coverTransform,  
        transition: coverTransition  
    }]"  
    @touchstart="coverTouchstart"  
    @touchmove="coverTouchmove"  
    @touchend="coverTouchend"
>
    <scroll-view scroll-y class="list" :scroll-top="scrollTop" @scrolltolower="loadMore" :style="getHeight">
        <!-- 数据集插槽 -->
        <slot name="content-list"></slot>
        <!-- 上拉加载 -->
        <view class="load-more">{{loadText}}</view>
    </scroll-view>
</view>

操作步骤：

  • view内嵌scroll-view下滑touchmove

预期结果：

  • view内嵌scroll-view下滑需要触发touchmove事件

实际结果：

  • view内嵌scroll-view下滑没有触发touchmove事件

bug描述：

view内嵌scroll-view下滑，怎么不触发下滑的touchmove,可以触发上滑的touchmove

图片

Image

开发环境 版本号 项目创建方式
Windows win10 HBuilderX
HBuilderX 3.1.22

更多关于uni-app 3.1.22.20210709版本 view内嵌scroll-view下滑不会触发touchmove的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

临时解决方案：https://ask.dcloud.net.cn/question/126610?item_id=169027&rf=false

更多关于uni-app 3.1.22.20210709版本 view内嵌scroll-view下滑不会触发touchmove的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的

啊啊啊啊啊啊

还有没有人啊，bug都不管了？

更新之后我也遇到这个问题了，当scroll-y=true时上滑能正确处理，但是下滑却无法进入touchmove事件中；scroll-y为false时上滑和下滑都能正确处理，个人猜测是修复这个https://ask.dcloud.net.cn/question/124430问题时下滑事件被拦截，导致无法进入touchmove中

我自己实现的时候那个问题也遇到了，后面改成插件市场的下拉刷新，具体没研究过，但他是这么实现的，所以出现了这个问题，目前发现h5不行，小程序可以正常触发

回复 1***@qq.com: 请问你改成插件市场的哪一个下拉刷新了

回复 刘超群: 推是推荐mescroll啊，但我还没换，因为小程序上能滑

3.2.0 alpha 已修复

为什么我这边没有提示更新

你可以尝试一下 使用 pointerEvents 来解决事件冲突问题,
使用了 pointerEvents 了 这就意味着 同一时间只能触发一个事件 , 要么 touchmove 要么 scroll, 如果你是用于设置下拉加载, 这个 pointerEvents 几乎可以完胜这个问题
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

这是一个已知的uni-app滚动容器事件冲突问题。在uni-app 3.1.22版本中，当scroll-view组件嵌套在view容器内时，scroll-view会优先处理滚动事件，导致外层view的touchmove事件无法正常触发。

问题分析：

  • scroll-view组件内部实现了自己的触摸事件处理机制
  • 当手指在scroll-view区域内滑动时，事件会被scroll-view捕获并消费
  • 这导致外层view的touchmove事件回调无法执行

解决方案：

  1. 使用catchtouchmove事件
<view 
    @touchstart="coverTouchstart"
    catchtouchmove="coverTouchmove"
    @touchend="coverTouchend"
>
  1. 调整事件处理逻辑 如果需要在scroll-view滑动时同步处理外层view的变换效果，建议将相关逻辑移至scroll-view的@scroll事件中：
<scroll-view 
    scroll-y 
    class="list" 
    :scroll-top="scrollTop" 
    [@scroll](/user/scroll)="handleScroll"
    @scrolltolower="loadMore" 
    :style="getHeight"
>

handleScroll(e) {
    // 在这里处理滚动逻辑，替代外层的touchmove
    const scrollTop = e.detail.scrollTop
    // 实现原本在coverTouchmove中的效果
}
回到顶部