uniapp的scroll-view中的scrolltolower事件偶尔不执行

背景

uniapp的scroll-view中的scrolltolower事件偶尔不触发,页面已经上拉到最底部了,然后一直上拉滑动(这时页面已经处于最底部),这个事件一直不触发,只是偶尔会发生。在一直上拉不触发的情况下,把页面往下拉滑动一点点,这个事件就触发了,官方文档也有人遇到一样的问题,官方文档中的相关问题

问题解决方法

为了在不改变现有样式的情况下解决这个问题,我采用了一种新的方法。在用户手指滑动屏幕时记录滑动开始和结束的状态,并在滑动结束时检查状态是否变化。如果没有变化,则手动调用 handleLoadMore 来触发数据加载。这样可以避免事件偶尔不触发的情况。

具体实现如下:

<scroll-view @touchstart="scrollViewTouchStart" @touchend="scrollViewTouchEnd" style="height:calc(100% - 185px);" @scrolltolower="handleLoadMore"
			lower-threshold='300'>
<view v-for="item in size">aaa</view>
</scroll-view>		
//临时数据,用来判断是否需要加载数据
let tmpData = {
	size: 0, //滚动区域内容长度
	isLoad: false //标记是否已经加载
}
//滚动区域内容长度,跟业务相关
const size = ref(0)

function scrollViewTouchStart() {
	tmpData['size'] = size.value
	tmpData['isLoad'] = false
}

function scrollViewTouchEnd() {
//判断一下handleLoadMore有没生效
	if (!tmpData['isLoad'] && size.value === tmpData['size']) {
		tmpData['isLoad'] = true
		handleLoadMore()
	}
}

function handleLoadMore(){
//	加载更多的逻辑
	tmpData.isLoad = true
// 这里省略网络请求,直接滚动内容+1
	size.value += 1
}

这种方法确保了即使在 scrolltolower 事件偶尔不触发的情况下,也能通过代码逻辑来手动触发数据加载,解决了滑动到底部时无法加载更多数据的问题。

  • 16
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_39579031

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值