微信小程序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()
			},

可以看出快速滑动之后获取的高度是不准确的

image.png

原因

这是因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流可以在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都是正确的

image.png

分类:前端小程序

标签:前端uniapp小程序

上一篇uniapp小程序引导用户进行地理位置授权下一篇[转载 · 小夏的随笔] Windows(obfuscator) 一键JS混淆加密

版权声明

本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~

Preview