全局上拉加载
在H5中，上拉加载的实现是需要监听window.onscroll事件，通过判断滚动距离和浏览器高度来判断是否用户已经拉到页面底部。在微信小程序中，官方提供了一个触底事件onReachBottom，它会在页面滚动到底部的时候自动触发。
onReachBottom()
Page({
....
onReachBottom:function(){
//上拉加载
wx.showLoading({
title: '正在加载',
})
setTimeout(()=>{
wx.hideLoading()
},1000)
}
....
})
局部上拉加载
以上方法是针对全局滚动的，可是有时候需要对局部滚动区域做上拉加载，比如下面的例子：
456.gif
局部上拉加载是通过小程序组件的
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 ，这样也能通过点击顶部状态栏回到页面顶部
