小程序上拉加载

全局上拉加载

在H5中，上拉加载的实现是需要监听window.onscroll事件，通过判断滚动距离和浏览器高度来判断是否用户已经拉到页面底部。在微信小程序中，官方提供了一个触底事件onReachBottom，它会在页面滚动到底部的时候自动触发。

onReachBottom()

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

Page({
    ....
    onReachBottom:function(){
        //上拉加载
        wx.showLoading({
            title: '正在加载',
        })
        setTimeout(()=>{
            wx.hideLoading()
        },1000)
    }
    ....
})

局部上拉加载

以上方法是针对全局滚动的，可是有时候需要对局部滚动区域做上拉加载，比如下面的例子：

局部上拉加载是通过小程序组件的scroll-view来实现的，它有个方法是bindscrolltolower，作用是滚动到底部/右边时触发，它可以配合lower-threshold来使用，表示距底部/右边多远时，触发 scrolltolower 事件，上例中我设置的是80像素，就是正在加载中区域的高度，每当用户滚动到距离底部80像素的时候，换句话说就是正在加载中出现在可是区域的时候就触发scrolltolower事件，来加载下一页的数据，这样就可以实现局部的上拉加载。代码如下：

//wxml
<scroll-view bindscrolltolower="getData" scroll-y lower-threshold="80">
        <!-- 内容区域 -->
        <movieItem datas="{{movieData}}"></movieItem>
        <!-- 正在加载中 -->
        <loading></loading>
</scroll-view>

这里有一点需要注意的是，当用户滚动到底部lower-threshold设置的区域的时候，会有连续触发多次的问题，这样会导致连续触发请求导致一次性加载多页的情况，处理这个问题你可以选择加标识符（如下例子的loadBool）或者使用节流来控制。

Page({
    data: {
        movieData:[],
        loadBool:true,
        pageSize: 10,
        pageIndex: 1
    },
    getData() {
        if(!this.data.loadBool) return;
        // 下一页的时候页码加一
        this.setData({
            pageIndex: this.data.pageIndex++,
            loadBool:false
        })
        //调用豆瓣API获取下一页数据
        $get('in_theaters', {
            start: this.data.pageSize,
            count: this.data.pageIndex
        }, (res) => {
            this.setData({
                movieData: res.data.subjects,
                loadBool:true
            })
        })
    }
})

以下是使用scroll-view的注意事项（转自官方文档）

• 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
• scroll-into-view 的优先级高于 scroll-top
• 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
• 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部