【发烂渣】微信小程序的下拉刷新和上拉加载更多一直写iOS，macOS。仲会有那么几天像女人来大姨妈一样，提不起劲，心情暴

一直写iOS，macOS。仲会有那么几天像女人来大姨妈一样，提不起劲，心情暴躁。一般这种情况下，我都会去学习一下别的技术，去隔壁老王家（其实是隔壁部门），帮（学）助(习)他们解决一下工作量。

虽然做完一个资深的iOS开发者。但在面临着大前端、跨平台等快速开发的压力下，也开始尝试一下VUE、Flutter等技术的开发。但最近隔壁Web部门在做小程序，所以在这一周来大姨妈的期间，我就隐瞒着老板，偷偷的过去玩耍了几天一番。

好不容易帮他们完成了一个模块的【首页】、卡片列表页的界面搭建和接口对接后。满怀欣喜的准备走的时候的。突然PM小贱贱叫停了我，并有了以下的对话：

PM:“你这个不行啊！”
我：“你才不行，老子行的很！”
PM：“你这个都没【下拉刷新】和【上拉加载更多】”
我：“。。。。。”`

然后我默默的坐下，默默的打开了VSCode。开启了我的下拉刷新和上拉加载更多！

对于微信小程序，在很多的地方，微信其实已经封装了很多的东西。相比较于做原生开发，那真的是快速简单方便。同时在双向绑定的原理上，更加加快了开发的速度上。同时还是一套代码，Android和iOS两平台，几乎无差别的运行。实在是很爽。

所以在启用下拉刷新和上拉加载更多，其实在微信小程序的开发很简单。只要进行一些相关的配置，就可以如德芙巧克力一般丝滑的使用了。

 "window":{
    "enablePullDownRefresh": true,//这个是配置下拉刷新
    "onReachBottomDistance":50,//这个是配置上拉加载更多，页面上拉触底事件触发时距页面底部距离，单位是px哦，记得哦
  }

这里需要注意一点的是！是true，不是"true".它是布尔值，不是字符串。不要问我为什么知道！

完整的代码如截图:

2.如果不希望整个项目都支持【下拉刷新】和【上拉加载更多】，只是某个界面支持。那就更加简单了。在你需要的界面，找到该界面的文件的xxx.json文件。然后再次猛敲你的键盘！

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance":50,//这个是配置上拉加载更多，页面上拉触底事件触发时距页面底部距离，单位是px哦，记得哦
}

完整的代码如截图:

打开界面的.js文件

敲上如下代码即可：

  onReachBottom:function(){
    console.log('我是上拉加载更多');
  },

  onPullDownRefresh:function(){
    console.log('我是下拉刷新');
  },

该两个方法必须在Page的生命周期内进行声明，所以必须写在Page里面。完整的代码如下：

这样我们就基本完成了99%了。同时微信还提供了2个方法让我们进行控制下拉刷新.分别是如下:

1.wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
2.wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

虽然很简单！但我也倒腾了接近了1个小时。主要是因为一个问题！因为新版本的微信开发者工具，在新建一个Page页面的时候，会默认生成这个2函数。而我又傻乎乎的自己添加了这2个函数。导致了一个很奇怪的问题就是，虽然可以触发到这2个函数。但在函数里面无法做任何其他的时候。如无法获取this指针等。

其实这个也不怪我，在iOS开发、macOS开发里。一个类里面如果有重名函数，是不会编译通过的。

哎，惯性思维害死人！