我们先看一下效果图：

示例代码：

<div class="demo" style="height:100vh">
   <pull-refresh @refresh="refresh" @load="load" 主动调用>
     <ul>
        <li v-for ="(item, index) in llist" :key="index">item{{item}}</li>
    </ul>
  </<pull-refresh>
</div>

注意：组件父级最好设置一个高度 例如：<div class="demo" style="height:100vh">

组件参数：

loadDistance（类型 Number）

默认值 100，距离底部多少触发加载

drag（类型 Number）

默认值 0.6， 顶部下拉阻力值

组件暴露方法:

refresh

用户刷新成功主动调用

示例：ctx.$refs.pull.refresh()

load

用户加载成功主动调用

接收一个参数 isDone 控制是否加载完成，如果传 true 将不会触发加载更多。

示例：ctx.$refs.pull.load()

具体的PullRefresh组件源码，请前往github地址获取。

https://github.com/AntJavascript/WidgetUI3.0/blob/master/PullRefresh.vue