微信小程序进阶开发-上滑加载更多

作者:vkvi 来源:ITPOW(原创) 日期:2017-4-26

微信小程序自带有下拉刷新,但是没有自带上滑加载更多,不过网上说可以用 scroll-view 来实现。

但是我并不推荐 scroll-view,不过我们还是先看看用 scroll-view 的做法,再介绍一下我的做法。

一定要有两个属性:

  • 一是在样式中指定 height
  • 二是指定 scroll-y 为 true。

然后就可以用 bindscrolltoupper 监测滑到最上头了,用 bindscrolltolower 监测滑到最下头了。理论上它可以实现上拉刷新、下拉加载更多两种效果,但是效果不是很好。

而且它是滑到端头就响应事件,并不是需要继续拉一段距离才响应,这点不如 enablePullDownRefresh 完美。

还有:微信并不推荐在 scroll-view 中使用 textarea、map、canvas、video 组件。

还有: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh。

所以还是介绍新的方案吧:onReachBottom

虽然也没有实现继续拉一段距离才响应,但是整个效果比 scroll-view 好多了。

 

相关文章