跟老姚学前端,课程体系更完善,10%基础 + 90%实战演练,快人一步学编程

扫一扫浏览

uniapp的scroll-view通过scroll判断滚动到顶部会有问题

未结贴
0 574
yaosean未认证 2021-02-17 09:17:11
收藏

在很多时候我们都会用到scroll-view做上下滚动效果,当在做一些多元素组合效果的时候,我们可能会须要判断是否滚动到顶部的问题,通过我们都是通过@scroll事件监听来做的

问题总结:如果快速手动拉到顶部,得到的e.detail.scrollTop值不一定是0

测试代码:

<template>
	<scroll-view scroll-y="true" class="scroll" @scroll="scroll">
		<view class="item">1</view>
		<view class="item item2">2</view>
		<view class="item item3">3</view>
		<view class="item item4">4</view>
	</scroll-view>
</template>

<script>
export default{
	data(){
		return {
			
		}
	},
	methods:{
		scroll(e){
			console.log(e.detail.scrollTop,e);
		}
	}
}
</script>

<style lang="scss">
.scroll{
	height: 500rpx;
	width: 750rpx;
}
.item{
	width: 750rpx;
	height: 200rpx;
	background-color: #000000;
}
.item2{
	background-color: #0000FF;
}
.item3{
	background-color: #00BFFF;
}
.item4{
	background-color: #18B566;
}
</style>

可以测试,快速拉顶的情况下,e.detail.scrollTop并不是0,所以通过这个来判断是否到顶部是不准确的

滚动效果图

出现这样问题的原因就要看触发scroll事件的机制是什么样的,快速滚动跟慢速滚动触发scroll的数量是不一样的,可以看出触发的条件对滚动速度或时间是有限制的,所以会有这样的问题出现

那么怎么来准确的判断是否滚动到顶部呢?

这里我们可以使用滚动到顶部事情scrolltoupper,这个事情是可以正常触发的

完整代码:

<template>
	<scroll-view scroll-y="true" class="scroll" @scroll="scroll" @scrolltoupper="scrolltoupper">
		<view class="item">1</view>
		<view class="item item2">2</view>
		<view class="item item3">3</view>
		<view class="item item4">4</view>
	</scroll-view>
</template>

<script>
export default{
	data(){
		return {
			
		}
	},
	methods:{
		scroll(e){
			console.log(e.detail.scrollTop,e);
		},
		scrolltoupper(e){
			console.log("顶部了",e);
		}
	}
}
</script>

<style lang="scss">
.scroll{
	height: 500rpx;
	width: 750rpx;
}
.item{
	width: 750rpx;
	height: 200rpx;
	background-color: #000000;
}
.item2{
	background-color: #0000FF;
}
.item3{
	background-color: #00BFFF;
}
.item4{
	background-color: #18B566;
}
</style>

只要到了顶部,都会触发@scrolltoupper事件,这样就能解决是否到达顶部问题了~

最近热帖 HOT TOPIC
【全套视频】thinkphp5视频教程 28225
父元素flex之后,子元素高度自适应问题 8192
thinkphp5隐藏默认模块的一些问题 7239
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 7065
教你如果处理高并发数据不同步的问题php篇 6750
omnicore rpc api中文手册【usdt】 6667
PHP如何判断字符串是否为json格式 6651
关于thinkphp5.0.x getshell漏洞的说明 6556
api接口文档插件easydoc的基本用法,快速搞定接口文档 6258
使用宝塔linux面板创建FTP无法连接的解决办法(阿里云或腾讯云) 6240
月度热议HOT COMMENTS
【全套视频】thinkphp5视频教程 33
tpframe 后续版本你希望有的功能是什么(分享贴) 12
权限那里怎么一登录别的账号就报错啊 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
tpframe6.0马上就要跟大家见面了,一次全新的升级 5
透析thinkphp5升级版开发框架tpframe 3
新增的管理员没有权限操作CMS模块。 3