小程序bindscrolltolower上拉加载更多快速划到底不触发解决

scroll-view在Android下快速上拉触底后不触发bindscrolltolower~

bug问题描述:
在安卓环境下,列表快速上拉进行滚动加载更多,会出现卡在低端 不进行加载现象,需要在卡住的位置重新下拉一小段距离再重新上拉加载 才可以加载出数据。(慢速上拉是可以正常加载更多数据)。

问题分析:
在父级、子级高度都设置正常的情况下,也就是需要固定的height值固定,需要给height:100%的也正常设置,但是仍然会出现此bug,scroll-view 已经触底了, 继续向下滑动因为已经到底了所以不会触发 scroll 事件自然也就不会触发 bindscrolltolower, 然后表现就是卡住了. 但是往下拉再上拉后会重新触发scroll事件, 并且这种情况 scrollTop 大概率都不会出问题, 可能是滑的慢也可能是滑的距离短。
个人分析是触底的scrollTop 没有达到预期的高度,视为距离底部有一段距离。所以没办法触发
bindscrolltolower事件。

解决方案:
在scroll-view中有一个属性是lower-threshol(距底部/右边多远时,触发 scrolltolower 事件),根据以上分析,可以将lower-threshol设置成一个合理的值,来提前触发bindscrolltolower。 针对我的项目,完美解决。
官方文档截图如下:
地址如下:
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
在这里插入图片描述
ps:前提是父子级的样式height需要正确填写,特别注意一些position的给值。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现微信小程序上拉加载更多数据,你可以通过以下步骤实现: 1. 在 wxml 文件中添加一个 scroll-view 组件,并设置其 scroll-into-view 属性为一个变量,用于记录当前滚动到的位置。 2. 在 js 文件中,定义一个变量 page,表示当前加载的页数,初始值为 1。 3. 在 scroll-view 组件上绑定一个 scrolltolower 事件,当滚动到底部时触发该事件。 4. 在 scrolltolower 事件中,发送请求获取下一页数据,并将 page 加 1。 5. 将获取到的数据添加到原有数据列表中。 6. 在获取数据之前,显示一个 loading 提示。 7. 在请求结束后,隐藏 loading 提示,并更新 scroll-into-view 属性,将页面滚动到数据的最后一项。 以下是一个简单的示例代码: ``` // wxml 文件 <scroll-view scroll-into-view="{{scrollIntoView}}" scroll-y="true" bindscrolltolower="loadMoreData"> <view wx:for="{{dataList}}" wx:key="{{index}}">{{item}}</view> </scroll-view> // js 文件 Page({ data: { dataList: [], // 数据列表 page: 1, // 当前页数 scrollIntoView: '', // 当前滚动到的位置 loading: false // 是否正在加载数据 }, onLoad: function () { this.loadData() }, // 加载第一页数据 loadData: function () { // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=1', success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: res.data.data }) } }) }, // 加载更多数据 loadMoreData: function () { // 如果正在加载数据,则不处理 if (this.data.loading) { return } // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=' + (this.data.page + 1), success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: this.data.dataList.concat(res.data.data), page: this.data.page + 1, scrollIntoView: 'item-' + (this.data.dataList.length - 1) // 将页面滚动到最后一项 }) }, complete: () => { // 标记数据已加载完成 this.setData({ loading: false }) } }) // 标记正在加载数据 this.setData({ loading: true }) } }) ``` 在上述示例中,我们使用了 wx.showLoading 和 wx.hideLoading 方法来显示和隐藏 loading 提示。注意,在请求结束后,需要在 complete 回调函数中调用 setData 方法,以更新 loading 变量的值。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值