uni-app中scroll-view不触发@scrolltolower事件(某些机型)

背景:uni-app中scroll-view中用@scrolltolower的时候需要设置lower-threshold的值,(a)当设置为10的时候,某些机型滑动太快时到了底部再也划不动同时也没触发这个事件,需要往下划一下再接着往上滑才会触发,比如红米10;(b)当设置为0的时候,红米10滑倒底部直接不会触发的,怎么滑都不会触发,但是ios系统的都没问题

解决scroll-view不触发@scrolltolower事件

原理:基于lower-threshold属性的联想,应该先获取到scroll-view区域底部有多少距离,然后在底部距离处于某一范围内触发下一页的请求并且保证只触发一次,当请求完成后scroll-view区域变大,底部距离也会变大,接着滑动当底部距离满足条件就可以进行第二次页数的请求了,底部距离处于某一范围内设置的足够大,这样就没有机会一下子滑动到底部了。
实现:先获取滑动过程中scroll-view区域底部的距离,获取准确的距离要保证scroll-view标签充满外面的view标签。因此获取scroll-view可视区域也就是获取外面的view标签。

<view class="listCon relative flex1" id="test">
    <scroll-view scroll-y="true" @scroll='scroll'>
    .......
    .......
    </scroll-view>
</view>

method代码:uni.createSelectorQuery()需要在mounted之后,所以我把它放在了第一页请求列表的时候

getList({ next } = {}) {
			//请求参数params
			.......
			this.querySettleCustomerPageListByCompanyManager(params).then(res => {
				this.flag=true//稍后会用到
				//省略为请求结果处理过程
				.....
				
				this.dataList = this.dataList.concat(customList);
				//this.testHeight定义的存放可视区域的变量初始化为0 加判断是防止 请求一次创建一次
				if(this.testHeight==0){
					let view = uni.createSelectorQuery().in(this).select("#test");
					
					view.fields({
					  size: true,
					  scrollOffset: true
					}, data => {
					  this.testHeight=data.height
					}).exec();
				}
			});
			
		},

scroll事件:scroll-view的高度减去scroll-view上去的距离减去scroll-view的可视区域的差值小于等于100,100就是由于滑动快或者慢的容错值,只要处于这个值之间并且保证没有进行请求,那么就去请求下一页,flag初始为false,刚进去页面请求的成功时设为true,当滑动的时候满足差值并且flag为true,进行第二页的请求,在这个过程中就算再次滑动,但是第二页没有请求完,也不会触发下一次的请求了,就算请求完了,但是此时的scroll-view又变大了差值不满足也不会请求。

scroll(e){
    if(e.detail.scrollHeight-e.detail.scrollTop-this.testHeight<=100&&this.flag){
			this.flag=false
			this.scrolltolower()
	}
			
},
scrolltolower() {
           //我的这个是后端直接返回了一共多少页,所以 只需要把页数++就行了
			if(this.page< this.totalPage){
				this.page++
				this.getList()
			}
		},

有点啰嗦,但是 请求完scroll-view区域变大 我一直反应不过来,所以记录一下

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐