0
微信小程序scroll-view滚动scrollTop不准确
黄粱一梦2024-03-2813
小程序里面使用scrollView
<scroll-view
class="right-list"
:scroll-y="true"
:refresher-enabled="refresherConfig.refresherEnabled"
:refresher-triggered="refresherConfig.triggered"
refresher-default-style="none"
:lower-threshold="loadMoreConfig.lowerThreshold"
@refresherrefresh="listRefresherrefreshHandler"
@refresherpulling="listRefresherPullingHandler"
@refresherrestore="listRefresherStoreHandler"
@refresherabort="listRefresherabortHandler"
@scroll="scrollHandler"
@scrolltolower="scrollToLowerHandler"
ref="scrollView"
>
<template #refresher>
<view class="text-center refresher-im" style="width:100%">
{{ refresherConfig.canRefresher ? '释放 至上一个分类' : '下拉 至上一个分类'}}
</view>
</template>
<view class="goods-list">
<view class="item" v-for="item in list">
{{ item }}
</view>
</view>
<view class="go">
<view class="load-more-text text-center">
上拉 下一个类目
</view>
</view>
<uni-load-more v-if="loadMoreConfig.show" :status="loadMoreConfig.status" :content-text="loadMoreContent"></uni-load-more>
</scroll-view>
获取高度
scrollHandler(e){
// console.log(e);
let {detail} = e
let { scrollTop } = detail
let query = uni.createSelectorQuery().in(this)
let s = query.select('.goods-list').boundingClientRect(res => {
let {height} = res // 当前高度
console.log('当前高度',height);
console.log('滚轮高度',scrollTop);
}).exec()
},
可以看出快速滑动之后获取的高度是不准确的
原因
这是因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流可以在scroll-view 加一个 throttle=“{{false}}” 关闭节流
<scroll-view
class="right-list"
:scroll-y="true"
:throttle="false"
:refresher-enabled="refresherConfig.refresherEnabled"
:refresher-triggered="refresherConfig.triggered"
refresher-default-style="none"
:lower-threshold="loadMoreConfig.lowerThreshold"
@refresherrefresh="listRefresherrefreshHandler"
@refresherpulling="listRefresherPullingHandler"
@refresherrestore="listRefresherStoreHandler"
@refresherabort="listRefresherabortHandler"
@scroll="scrollHandler"
@scrolltolower="scrollToLowerHandler"
ref="scrollView"
>
<template #refresher>
<view class="text-center refresher-im" style="width:100%">
{{ refresherConfig.canRefresher ? '释放 至上一个分类' : '下拉 至上一个分类'}}
</view>
</template>
<view class="goods-list">
<view class="item" v-for="item in list">
{{ item }}
</view>
</view>
<view class="go">
<view class="load-more-text text-center">
上拉 下一个类目
</view>
</view>
<uni-load-more v-if="loadMoreConfig.show" :status="loadMoreConfig.status" :content-text="loadMoreContent"></uni-load-more>
</scroll-view>
此时保证每次scrollTop都是正确的
版权声明
本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~
Preview