微信小程序使用scroll-view自定义下拉刷新_uni-app scroll-view 真机模式开启自定义刷新 会出现下方多出一部分空白

前言：

很多朋友在进行小程序开发时，需要做下拉刷新功能，大部分人是直接使用系统的下拉刷新功能的。

1. 在 .json文件中设置

{
  "enablePullDownRefresh": true
}
1
2
3

2. 使用onPullDownRefresh()监听用户下拉操作，实现刷新操作；
   
3. 也可以通过wx.startPullDownRefresh和wx.stopPullDownRefresh触发和关闭页面下拉刷新；

一般人使用该方法就可以做出下拉刷新的效果，但是这个方法也有其缺点：

1. 没有办法自定义动画效果。
2. 该下拉刷新只能出现在最顶部，例如：
   
   当下拉刷新需要在全部、待付款、待发货、待收货这几个tab下面时，系统的下拉刷新就无法满足需要，我们就需要使用scroll-view来自定义下拉刷新。

用scroll-view内refresher-enabled属性开启自定义刷新

实现下拉刷新方法

wxml设置：

    <scroll-view scroll-y style="width: 100%;height:100%;" refresher-enabled="{{true}}" refresher-threshold="{{100}}" refresher-default-style="black" 
        refresher-background="white" refresher-triggered="{{triggered}}" bindrefresherrefresh="onScrollRefresh">
    </scroll-view>
1
2
3

refresher-enabled设置为true表示启用自定义下拉刷新，refresher-threshold为100表示下拉刷新的下拉高度为100, refresher-default-style选black，这个样式是默认的，和系统的也一致，refresher-background背景颜色选白色，refresher-triggered表示下拉刷新状态，onScrollRefresh是下拉刷新事件。

Js设置：

  /**
   * 页面的初始数据
   */
  data: {
    triggered: false,
  },
1
2
3
4
5
6

  //用户下拉动作
  onScrollRefresh: function () {
    var that=this;
    setTimeout(function(){
      that.setData({
        triggered: false,
      })
    },2000);
  },
1
2
3
4
5
6
7
8
9

当下拉时triggered会自动变为true，2000毫秒后手动将triggered变为false下拉刷新就会弹回去。

最后效果：

这样就可以做出简易的自定义下拉刷新了，朋友们可以自己尝试一下自定义下拉刷新，尝试更多功能。