uni-app scroll-view自3.1.22.20210707更新之后无法下拉触发父级组件的事件

uni-app scroll-view自3.1.22.20210707更新之后无法下拉触发父级组件的事件

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

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.22

浏览器平台：Chrome

浏览器版本：版本 68.0.3440.75（正式版本） （64 位）

示例代码：

<template>  
    <view class="content">  

        <movable-area style="width: 750rpx;height: 600rpx;background-color: red;">  
            <movable-view :out-of-bounds="true" direction="vertical" @change="change" style="width: 750rpx;height: 600rpx;">  

                <scroll-view scroll-y="true" @scroll="scroll" style="width: 750rpx;height: 600rpx;background-color: blue;">  
                    <view v-for="i in 30" :key="i">{{i}}</view>  
                </scroll-view>  

            </movable-view>  
        </movable-area>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad() {  

        },  
        methods: {  
            change(e){  
                console.log(e)  
            },  
            scroll(e){  
                console.log(e)  
            }  
        }  
    }  
</script>  

<style></style>

更多关于uni-app scroll-view自3.1.22.20210707更新之后无法下拉触发父级组件的事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用movable嵌套scroll 这还是一个前辈的 自定义 上拉加载 下拉刷新的 写法，，现在将scroll更新了一下，这个优秀的插件直接基本都废完了。唉

更多关于uni-app scroll-view自3.1.22.20210707更新之后无法下拉触发父级组件的事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app 3.1.22版本中，scroll-view嵌套在movable-view内确实存在事件传递问题。这是由于该版本对事件冒泡机制进行了调整，导致scroll-view的滚动事件无法正常向上冒泡到父级movable-view。

问题分析：

  1. scroll-view在滚动时会阻止默认的页面滚动行为，这可能会影响父级容器的事件响应。
  2. 当scroll-view内容滚动到边界时，继续下拉本应触发父级movable-view的拖动，但在3.1.22版本中这个事件传递被中断了。

解决方案：

  1. 使用@touchstart和@touchend事件替代： 在scroll-view上添加触摸事件监听，手动触发父级组件的行为：
    <scroll-view 
    scroll-y="true" 
    @scroll="scroll"
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    style="width: 750rpx;height: 600rpx;background-color: blue;">
回到顶部