【报Bug】scroll-view 惯性滚动@scrolltoupper事件不触发，@scroll 事件 e.detail.scrollTop 值不准确

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 64位

HBuilderX类型：正式

HBuilderX版本号： 4.45

第三方开发者工具版本号： Nightly 1.06.2503262

基础库版本号： 3.7.12

项目创建方式： HBuilderX

示例代码：

<template> <scroll-view class="container-wrapper" scroll-y="outerScroll" lower-threshold="0" @scroll="outerScrollHandler"
@scrolltolower="outerToLowerHandler"
>
<view class="detail-imgs">
<view class="no-img" v-if="nearShop.imgs == null || nearShop.imgs.length === 0">
<image src="/static/images/noimg.png"/>
</view>
<swiper v-else circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
<swiper-item v-for="(content,index) in nearShop.imgs" :key="index">
<image :src="content.url" @click="previewImage(index)"/>
</swiper-item>
</swiper>
</view>
<view class="content">

<view class="merchant-info">
<view class="name">{{ nearShop.name }}</view>
<view class="open-time">开放时间：{{ nearShop.businessHoursStart + '-' + nearShop.businessHoursEnd }}</view>
</view>

<view class="address-info">
<view class="address">
<view class="journey">距离我的位置有25.7公里</view>
<view class="specific-address tui-ellipsis">{{ nearShop.address }}</view>
</view>
<view class="map">
<image src="/pagesNls/static/imgs/marker.png" />
<text>地图</text>
</view>
<image src="/pagesNls/static/imgs/phone-icon.png" />
</view>
</view>

<view class="room-info">
<tui-tabs tabs="tabs" currentTab="currentTab" zIndex="1" sliderHeight="48"
sliderWidth="156"
sliderBgColor="#3A8BE6"
sliderRadius="48rpx"
bottom="8"
selectedColor="#fff"
color="#333"
@change="changeHandler"
></tui-tabs>

<swiper
class="content-swiper" current="currentTab" duration="300" @change="swiperChangeHandler"
>

<swiper-item class="swiper-item">
<scroll-view scroll-y="innerScroll" upper-threshold="0" @scroll="innerScrollHandler"
@scrolltoupper="innerToUpperHandler"
>
<view class="swiper-item-wrapper">
<RoomItem v-for="item in 10" :key="item" />
</view>
</scroll-view>
</swiper-item>

<swiper-item class="swiper-item">
<scroll-view scroll-y="innerScroll" upper-threshold="0" @scroll="innerScrollHandler"
@scrolltoupper="innerToUpperHandler"
>
<view class="swiper-item-wrapper">
111
</view>
</scroll-view>
</swiper-item>

<swiper-item class="swiper-item">
<scroll-view scroll-y="innerScroll" upper-threshold="0" @scroll="innerScrollHandler"
@scrolltoupper="innerToUpperHandler"
>
<view class="swiper-item-wrapper">
<rich-text :nodes="formatRichText(nearShop.remark)"></rich-text>
</view>
</scroll-view>
</swiper-item>

<swiper-item class="swiper-item">
<scroll-view scroll-y="innerScroll" upper-threshold="0" @scroll="innerScrollHandler"
@scrolltoupper="innerToUpperHandler"
>
<view class="swiper-item-wrapper">
aaa
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>

<tui-gallery :urls="urls" :current="currentIndex" :show="show" @hide="show = false"></tui-gallery>
</scroll-view>
</template>

        uni.setNavigationBarTitle({  
            title: this.nearShop.name,  
        });  
        // var that = this;  
        // const eventChannel = this.getOpenerEventChannel();  
        // eventChannel.on('nearShop', function(nearShop) {  
        //  that.nearShop = nearShop;  
        //  that.nearShop.remark =  that.formatRichText(nearShop.remark);  
        //  uni.setNavigationBarTitle({  
        //      title: nearShop.name,  
        //  });  
        //  recordStatVisit({  
        //      relationalId: nearShop.id,  
        //      relationalType: 'NLS_SHOP',  
        //      residentId: getApp().globalData.currentUserResident != null ? getApp().globalData.currentUserResident.id : 0,  
        //  });  
        // });  
    },  
    onReady(){  
        this.getViewportHeight()  
    },  
    methods: {  
        toTelGJ() {  
            if(this.nearShop.hotline){  
                uni.makePhoneCall({  
                    phoneNumber: this.nearShop.hotline.replace(/[^\d]/g,"")     // 替换非数字字符  
                });  
            }  
        },  
        formatRichText(html) {  
          let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');  

            // 替换空白p  
            newContent = newContent.replace('<p></p>', '<p style="padding-bottom:1em"></p>')  

          return newContent;  
        },  
        previewImage(index){  
            this.currentIndex = index  
            this.show = true  
        },  
        changeHandler(e){  
            this.currentTab = e.index  
        },  
        swiperChangeHandler(e){  
            this.currentTab = e.detail.current  
        },  
        outerToLowerHandler(){  
            // console.log('toLower-x')  
            // clearTimeout(this.outerTimer)  
            // this.outerTimer = 'EXIT'  
            // setTimeout(() => {  
            //  this.outerTimer = null  
            // }, 400)  
            // this.innerScroll = true  
        },  
        outerScrollHandler(e){  
            console.log(e,e.detail.scrollTop, 'e-x')  
            // if(this.outerTimer === 'EXIT'){  
            //  // scroll 触发的时机不确定，这里是用来终止的  
            //  return   
            // }  
            // clearTimeout(this.outerTimer)  
            // this.outerTimer = setTimeout(() => {  
            //  console.log(e, 'e-x')  
            //  if(e.detail.scrollHeight - this.clientHeight > e.detail.scrollTop){  
            //      this.innerScroll = false  
            //  }  
            // }, 300);  
        },  
        innerToUpperHandler(){  
            clearTimeout(this.innerTimer)  
            this.innerTimer = 'EXIT'  
            setTimeout(() => {  
                this.innerTimer = null  
            }, 400);  
            this.outerScroll = true  
        },  
        innerScrollHandler(e){  
            if(this.innerTimer === 'EXIT'){  
                return  
            }  
            clearTimeout(this.innerTimer)  
            this.innerTimer = setTimeout(() => {  
                console.log(e, 'inner-x')  
                if(e.detail.scrollTop > 0){  
                    this.outerScroll = false  
                }  
            }, 300);  
        },  
        // 获取可视区域高度（兼容小程序和APP）  
        getViewportHeight() {  
            this.clientHeight = uni.getSystemInfoSync().windowHeight  
        }  
    }  
}

</script>

.detail-imgs{  
    width: 100%;  
    height: 492rpx;  

    .no-img, swiper{  
        height: 100%;  
    }  

    image{  
        width: 100%;  
        height: 100%;  
    }  
}  

.content{  
    padding: 32rpx 26rpx 40rpx;  
    line-height: 42rpx;  
    background-color: #fff;  
    margin-bottom: 18rpx;  

    .merchant-info{  
        margin-bottom: 30rpx;  

        .name{  
            font-size: 32rpx;  
            font-weight: bold;  
        }  
    }  

    .address-info{  
        background-color: #E9F0F8;  
        border-radius: 8rpx;  
        display: flex;  
        padding: 24rpx 30rpx 24rpx 20rpx;  
        align-items: center;  

        .address{  
            flex-grow: 1;  
            overflow: hidden;  

            .specific-address{  
                color: #909090;  
            }  
        }  

        .map{  
            color: #909090;  
            padding: 0 36rpx;  
            margin-right: 32rpx;  
            display: flex;  
            flex-direction: column;  
            flex-shrink: 0;  
            align-items: center;  
            border-right: 1px solid #D0CECE;  

            image{  
                width: 38rpx;  
                height: 48rpx;  
            }  
        }  

        image{  
            width: 52rpx;  
            height: 52rpx;  
            flex-shrink: 0;  
        }  
    }  
}  

.room-info{  
    display: flex;  
    flex-direction: column;  
    height: 100vh;  

    .content-swiper{  
        padding: 0 26rpx 0;  
        background-color: #fff;  
        flex: 1;  
        scroll-view{  
            height: 100%;  
            .swiper-item-wrapper{  
                padding-bottom: 32rpx;  
            }  
        }  

    }  
}

}
</style>

操作步骤：

快速滚动一下，利用惯性让scroll-view 滚动到底部。重复几次，会出现

预期结果：

@scrolltoupper 事件触发，@scroll 事件的 e.detail.scrollTop 值准确

实际结果：

@scrolltoupper没有触发，@scroll 事件的 e.detail.scrollTop 不准确

bug描述：

我的项目是uniapp 跨平台项目，微信小程序，app，现在有这么个问题：我真机用手指快速滚动一下，然后手指离开屏幕，此时scroll-view 还在滚动，并且滚动到了底部，但是@scrolltoupper没有触发，并且scroll事件的 e.detail.scrollTop 数据不准确，其实已经滚动到底部，scrollTop是417，但是它给出的是385

2025-03-31 17:19 负责人:无分享

0 个回复

要回复问题请先登录或注册

【报Bug】scroll-view 惯性滚动@scrolltoupper事件不触发，@scroll 事件 e.detail.scrollTop 值不准确

操作步骤：

快速滚动一下，利用惯性让scroll-view 滚动到底部。重复几次，会出现

预期结果：

@scrolltoupper 事件触发，@scroll 事件的 e.detail.scrollTop 值准确

实际结果：

@scrolltoupper没有触发，@scroll 事件的 e.detail.scrollTop 不准确

bug描述：

0 个回复

公告

相关问题

【报Bug】scroll-view 惯性滚动@scrolltoupper事件不触发，@scroll 事件 e.detail.scrollTop 值不准确

操作步骤： 快速滚动一下，利用惯性让scroll-view 滚动到底部。重复几次，会出现

预期结果： @scrolltoupper 事件触发，@scroll 事件的 e.detail.scrollTop 值准确

实际结果： @scrolltoupper没有触发，@scroll 事件的 e.detail.scrollTop 不准确

bug描述：

与内容相关的链接

0 个回复

公告

相关问题

操作步骤：

快速滚动一下，利用惯性让scroll-view 滚动到底部。重复几次，会出现

预期结果：

@scrolltoupper 事件触发，@scroll 事件的 e.detail.scrollTop 值准确

实际结果：

@scrolltoupper没有触发，@scroll 事件的 e.detail.scrollTop 不准确