👦个人简介：张清悠，字澄澈，号寻梦客，爱好旅行、运动，主攻前端方向技术研发，副攻Unity 3D、C++、Python人工智能等
📝个人寄语：学会不为过程的缓慢而焦虑，即使暂时未能如你所愿，但只要你在努力，你就在不断成长！
🙏个人公众号:清悠小猿(海量源码尽在其中，欢迎关注)

一、前言：

手机端APP或者是微信小程序再或者是H5要做分页只能通过下拉刷新或者上拉加载来实现，毕竟不是PC端那样大的视觉感，相比较而言难度更大的就是手机端APP上了，需要自行判断距离来计算下拉高度和上拉高度，逻辑事件也比较繁琐，而相对于H5或者是小程序端有着系统的方法，我们可以直接拿来即用来达到我们的需求，今天我们的主题就是——微信小程序的上拉加载与下拉刷新

二、需求分析：

前段时间接手了一个小程序迭代的项目，由于当初用户不是很大，没有做分页的效果，导致操作不当直接把服务器干掉了，这个小程序的主要作用就是发布任务抢单，由于后台发布人操作不当把时间写错直接出几万条的数据，再一下子把服气干崩了，用户不多服务器的内存也不大，所以才出现了，这种情况，下面分析一下需求，就是有列表的页面都要加上分页功能就是所谓的上拉加载和下拉刷新。

三、 微信小程序下拉刷新上拉加载的两种实现方法介绍和代码逻辑：

1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载 （这两个方法是在我们创建小程序page在js方法里面自带的）

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161107

wxml

<scroll-view scroll-y = true >
    .........
</scroll-view>

js

onPullDownRefresh: function() {
     console.log('刷新');
 },

 onReachBottom: function() {
     console.log('下一页');
 },

2、是基于scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。 （[注意，使用这个模式一定要设置scroll-view的高度，100%不知道为什么设置后没效果，建议使用100vh] ）

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107

wxml

<scroll-view scroll-y = true bindscrolltolower="bottomjia" bindscrolltoupper="toprefesh">
    ..........
</scroll-view>

js

  bottomjia: function () {
            console.log('上拉加载')
  },
  toprefesh:function(){
  console.log('下拉刷新')
  }

四、微信小程序下拉刷新上拉加载的两种实现方法的比较

1、利用"onPullDownRefresh"和"onReachBottom"方法实现小程序下拉刷新上拉加载

优点：按照屏幕的高度进行加载和刷新，

缺点：当头部固定列表在下进行下拉或者上拉容易发生布局错乱异常（因为加载的是整个屏幕会导致，用户在下拉过快头部固定被列表所覆盖）

应用场景：页面都是列表加载和刷新

2、scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。

​优点：基于scroll-view 可以自定义设置屏幕高度的任意占比设置，进行上拉加载和刷新

缺点：需要单独设置事件进行生效，不设置scroll高度不会生效

应用场景：头部导航中间列表底部tab，不影响整体布局

五、总结

1、针对不同场景，应用不同的方法，避免出现不必要bug

2、计算好占屏比例，适配不同手机兼容

3、总结不易，欢迎转发评论