背景
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 事件偶尔不触发的情况下,也能通过代码逻辑来手动触发数据加载,解决了滑动到底部时无法加载更多数据的问题。