mpvue小程序页面中局部滚动到底部加载更多

今天在实现小程序下拉加载更多功能的时候遇到了一个bug
刚开始一直想通过小程序的onReachButtom实现触底调用getGoodsList方法实现下拉加载更多,但onReachButtom函数总是不触发

  onReachButtom(){
    this.getGoodsList()
  }

上网找了各种解决办法都没有解决,在main.json中加‘enablePullDounRefresh:true’这些都不能解决(enablePullDounRefresh:true是下拉刷新,不是下拉刷新...)

最后在小程序官方文档中看到,scroll-view这个组件中有scrolltolower事件
(距离底部/右边多远时,触发scrolltolower事件)
所以我将商品列表放在scroll-view这个组件中实现(记得给scroll-view一个高度),scroll-view内部触及底部的时候触发scrolltolower事件,在scrolltolower事件函数中调用 this.getGoodsList()方法实现页面局部数据懒加载


2020-05-11 下午6.27.23.png
handleScrollToButtom(){
    this.getGoodsList()  
}

成功实现页面局部数据懒加载


2020-05-11 下午6.34.51.png

so问题应该是onReachButtom是针对整个页面到达底部时触发,而我的goodslist是一个绝对定位定位在页面上的,我也没有给page一个固定的高度,我在goodslist上做滑动的时候,相对于页面来说,并没有触发到底部。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容