【微信小程序】转载：微信小程序实战篇-下拉刷新与加载更多

下拉刷新

实现下拉刷新目前能想到的有两种方式 
1. 调用系统的API，系统有提供下拉刷新的API接口

当然，你可以直接在全局变量app.json的window里面配置上面这个属性，这样整个项目都允许下拉刷新了,因为系统默认是不具备下拉刷新功能的 
 
2. 监听scroll-view,自定义下拉刷新，还记得scroll-view里面有一个bindscrolltoupper属性吗？忘记请自行回顾上一篇微信小程序实战篇-电商（二）当滚动到顶部/左边，会触发 scrolltoupper 事件，所以我们可以利用这个属性，来实现下拉刷新功能。

两种方法都可以，第一种比较简单，易上手，毕竟一些逻辑系统已经给你处理好了，第二种适合那种想要自定义下拉刷新样式的小程序，我们讲解电商，就用第一种，系统提供的就好，主要是教会大家怎么用。以首页为例 
1. home.json 参数配置

"enablePullDownRefresh": true

• 1

我们哪个页面需要下拉刷新，就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道，是否允许下拉刷新，

当然，你可以直接在全局变量app.json的window里面配置上面这个属性，这样整个项目都允许下拉刷新了,因为系统默认是不具备下拉刷新功能的 
2. home.js

  //下拉刷新
  onPullDownRefresh:function()
  {
    wx.showNavigationBarLoading() //在标题栏中显示加载

    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },

onPullDownRefresh 下拉刷新事件监听，具体看一下里面的代码，wx.showNavigationBarLoading() 与wx.hideNavigationBarLoading() 这两句话是用来控制小菊花的显示和隐藏，由于我们现在还没有讲解网络请求，所以我就模拟了一下网络加载，通过setTimeout方法，写一个时间延迟的方法，这个方法可以模拟网络加载所消耗的时间，还有就是当网络加载完成我们要停止下拉刷新wx.stopPullDownRefresh() 。

这个到目前为止下拉刷新的功能已经完成了，但是还不够完美，还是有点怪怪的，就是下拉刷新没有动画，有木有~我那时也感到奇怪，微信封装的下拉刷新怎么可能这样呐，后来我参考别人写的代码，发现一个小坑，先看一下我填完坑的效果吧

 
怎么样，是不是顺眼多了，想知道我是怎么加入这个动画的嘛，让我来给你揭晓，其实很简单，只需要一句话代码在app.json中window里配置下面属性，这个是配置整个系统的背景颜色，为什么我配置系统颜色就会出现下拉刷新了呐，原因就在下拉刷新的动画本身就有，只不过当我们没配置背景颜色，系统默认就为白色，动画也是白色，所以我们就看不到动画效果，是不是有点坑，哈哈~~

"backgroundColor": "#f0145a"