微信小程序scroll-view滚动scrollTop不准确

25 年 01 月 19日星期日 (已编辑)

作者：罗罗

日常生活

这篇文章最后修改于 2025年 01月 19日 11时00分部分内容可能已不适用如有疑问请联系作者.

小程序里面使用scrollView

html 复制代码

<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>

获取高度

js 复制代码

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}}” 关闭节流

html 复制代码

<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都是正确的

暂无目录信息

文章标题：微信小程序scroll-view滚动scrollTop不准确

文章作者：罗罗

文章链接：[复制]

最后修改时间：2024年 03月 28日 09时51分

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。本文采用CC BY-NC-SA 4.0进行许可。

豫ICP备2022014268号-1

我们历经沧桑，这样错过了一生最好的时光，错过了便是永远