1、在微信小程序中，想到 下拉刷新 和 上拉加载，如果是整个页面都拖动的话，可以在页面配置中，配置 enablePullDownRefresh 和 onReachBottomDistance 然后在 .js 中 使用 Page.onPullDownRefresh 和 Page.onReachButton 这样来进行。
2、上面的做法是官方推荐我们做页面的 下拉刷新 和 上拉加载 所使用的方法。但某种情况比如头部是固定的，但使用上面的方法，整个页面都拉动，会显得很奇怪。这个时候，我们的滚动实际上是使用了 scroll-view 来进行的，会显得更加好看。
3、使用 scroll-view 的话，会想到的是 bindscrolltoupper 和 bindscrolltolower，但其实使用这个两个也还是会出现问题的。这个问题是 bindscrolltoupper 会触发多次，而且一开始在顶部的时候，有可能没有响应到。
下面的方法是使用 touchstart 和 touchend 来实现的 上拉加载 和 下拉刷新：
1 <scroll-view id="scroll-wrap" 2 scroll-y 3 bindtouchstart="start_fn" 4 bindtouchend="end_fn"> 5 // 列表 6 </scroll-view>
通常我们都写法，都如上面一样，但因为要拿到滚动的最大高度，所以需要写成下面的样式：
1 <scroll-view id="scroll-wrap" 2 scroll-top="{{scroll_top}}" 3 scroll-y> 4 <view id="inner-wrap" 5 bindtouchstart="start_fn" 6 bindtouchend="end_fn"> 7 // 列表 8 </view> 9 </scroll-view>
我们需要获取 scroll-wrap 和 inner-wrap 的高度。
1 Page({ 2 data: { 3 height: 0, // scroll-wrap 的高度，这个高度是固定的 4 inner_height: 0, // inner-wrap 的高度，这个高度是动态的 5 scroll_top: 0, // 滚动到位置。 6 start_scroll: 0, // 滚动前的位置。 7 touch_down: 0 // 触摸时候的 Y 的位置 8 }, 9 // start: onLoad 生命周期 10 onLoad () { 11 let self = this; 12 wx.createSelectorQuery().select(\'scroll-wrap\').boundingClientReact(function (rect) { 13 self.data.height = rect.height; 14 }).exec(); 15 } 16 // end: onLoad 生命周期 17 });
因为scroll-view 要在垂直方向上可以滚动，需要设置height 的高度，所以通常情况下，只要获取一次就行了，如果scroll-view 因为某个元素消失掉，影响了高度的话，记得要更新 height 的值。
接下来就是 bindtouchstart 和 bindtouchend 的配合：
bindtouchstart ---- start_fn：
1 // start: 触摸开始 2 start_fn (e) { 3 let self = this; 4 let touch_down = e.touches[0].clientY; 5 this.data.touch_down = touch_down; 6 // 获取 inner-wrap 的高度 7 wx.createSelectorQuery().select(\'#inner-wrap\').boundingClientRect(function (rect) { 8 self.data.inner_height = rect.height; 9 }).exec(); 10 11 // 获取 scroll-wrap 的高度和当前的 scrollTop 位置 12 wx.createSelectorQuery().select(\'#scroll-wrap\').fields({ 13 scrollOffset: true, 14 size: true 15 }, function (rect) { 16 self.data.start_scroll = rect.scrollTop; 17 self.data.height = rect.height; 18 }).exec(); 19 } 20 // end: 触摸开始
bindtouchend ---- end_fn：
1 // start： 触摸结束 2 end_fn (e) { 3 let current_y = e.changedTouches[0].clientY; 4 let self = this; 5 let { start_scroll, inner_height, height, touch_down } = this.data; 6 /** 7 * 1、下拉刷新 8 * 2、上拉加载 9 */ 10 if (current_y > touch_down && current_y - touch_down > 20 && start_scroll == 0) { 11 // 下拉刷新 的请求和逻辑处理等 12 } else if (current_y < touch_down && touch_down - current_y >= 20 && inner_height - height == start_scroll) { 13 // 上拉加载 的请求和逻辑处理等 14 } 15 } 16 // end: 触摸结束
原理就是触摸的时候，检查是否在顶部或者是底部，如果在顶部，还进行下拉，就进行刷新；如果在底部了，还进行上拉，就进行加载。使用 touchstart 和 touchend 的问题是用户必须要手指离开才会触发到。如果想要在顶部下拉就刷新，可以在 touchmove 中进行判断。
需要注意的是，使用上面的方法，会使 scroll-view 上 绑定 bindscroll 、bindscrolltopupper 和 bindscrolltoploweper 等方法是无效的。
样式和动画效果的优化，自己去进行吧。
如果有更好的方法，可以在评论下，留下你的方法供大家学习。
这一篇的方法只适合安卓机的，但还是保留下来。
请发表评论