uni-app scroll-view组件极端情况下scroll方法获取的信息不对

uni-app scroll-view组件极端情况下scroll方法获取的信息不对

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

示例代码：

<template>  
    <view class="content">  
        <scroll-view scrollY style="margin-left: 100px; height: 400px; background-color: pink;" @scroll="scroll">  
            <view v-for="item in 10" :key="item" style="width: 100px; height: 100px;">texthh</view>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            scroll(event){  
                console.log('event', event.target.scrollTop);  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤：

同上述代码示例

预期结果：

希望能有个方法可以得到最终准确的数据。

实际结果：

数据不对称。

bug描述：

scroll-view组件设置纵向，在快速地滑动后到顶（或到底），通过@scroll方法获取到的event.target.scrollTop的值不为零（或不为内部组件的真实高度）。通过查看scroll-view组件的源代码发现“_handleScroll”方法设置了20ms的节流处理导致的。即在到顶（或到底）时没有触发到scroll方法，从而给出的数据不是真实值。

设置横向，有同样的问题。


更多关于uni-app scroll-view组件极端情况下scroll方法获取的信息不对的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

顶一下

更多关于uni-app scroll-view组件极端情况下scroll方法获取的信息不对的实战教程也可以访问 https://www.itying.com/category-93-b0.html


顶一下

已确认，已加分，预计下版带上

HBuilderX alpha 3.2.5+ 已修复

scroll-view天天有问题，一个版本修复完带出另外一个问题，就不能换个靠谱的人修复？

新bug https://ask.dcloud.net.cn/question/131709?item_id=177948&rf=false

根据你提供的代码和问题描述，这是一个已知的scroll-view组件在极端滚动情况下的数据同步问题。

问题核心在于scroll-view的@scroll事件使用了20ms的节流处理，当滚动速度过快时，可能会错过滚动到边界时的最后一次事件触发，导致获取的scrollTop值与实际滚动位置不一致。

解决方案：

  1. 使用@scrolltoupper和@scrolltolower事件 对于滚动到顶部或底部的边界情况，可以直接使用这两个专用事件：

    <scroll-view 
    scrollY 
    @scroll="handleScroll"
    @scrolltoupper="handleReachTop"
    @scrolltolower="handleReachBottom">

  2. 添加边界值修正 在scroll事件处理中，可以结合scroll-view的尺寸和内容高度进行边界值修正：

    methods: {
    scroll(event) {
        const scrollTop = event.detail.scrollTop
        const scrollHeight = event.detail.scrollHeight
        const clientHeight = 400 // scroll-view可视高度
        
        // 边界修正
        if (scrollTop <= 0) {
            console.log('实际已到顶部')
            return 0
        }
        if (scrollTop + clientHeight >= scrollHeight) {
            console.log('实际已到底部')
            return scrollHeight - clientHeight
        }
        
        console.log('scrollTop:', scrollTop)
    }
}

  3. 使用uni.createSelectorQuery()获取准确值 如果需要获取准确的滚动位置，可以使用DOM查询：

    methods: {
    scroll(event) {
        uni.createSelectorQuery()
            .select('.scroll-view-class')
            .boundingClientRect(rect => {
                console.log('准确scrollTop:', rect.scrollTop)
            }).exec()
    }
}
回到顶部