小程序 分屏加载&下拉刷新

1,175 阅读1分钟

微信小程序的官方文档一直被大家吐槽 api 一点即过,不清不楚

直接奔问题

小程序的组件有个 它可以获取到当前滚动适口的滚去高度,绑定滚动到底部的触发事件,滚动到顶部的触发事件

  • bindscrolltoupper(顶部)
  • bindscrolltolower(底部)
  • bindscroll (滚动触发)

那有人会觉的直接包一个<scroll-view> 绑定一下 bindscrolltolower

就可以实现底部分页加载 没错确实可以实现

但当我们面对下一个需求的时候,发现自己错了

下拉刷新

下拉刷新 官方提供三个api

onPullDownRefresh 需要在 configwindow选项中开启

enablePullDownRefresh:true

举例子:

Page({
    onPullDownRefresh: function(){
        wx.stopPullDownRefresh()
    }
})

问题来了

onPullDownRefresh<scroll-view> 不兼容 下拉刷新根本不会生效

难道只有自己手动去模拟

好,发现了一个新的api

可在 configwindow选项中配置

"onReachBottomDistance": 120 

ps:距离底部的多高 触发方法

onReachBottom: function () {
    xxxxxxxxx
    xxxxx
    xxx
},
如果错误地方,请留言指出~及时更正 谢谢~