uniapp实现局部刷新，scroll-view组件

uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件。

文档地址 scroll-view | uni-app官网

   <scroll-view scroll-y="true" show-scrollbar="true" style="height: 300px;" :refresher-triggered="triggered"
        :refresher-enabled="isOpenRefresh" @refresherpulling="onPulling" :refresher-threshold="100"
        @refresherrefresh="onRefresh" v-if="currentPage==0">
        <stepsOne></stepsOne>
      </scroll-view>

最外层的div使用 scrpll-view，需要给scrpll-view设置一个高度要不然不显示，

常见问题：

 1.scroll-view组件外部没有用view包裹. 官网虽然没有说这个问题, 但是如果外部没有一个view单独包裹着这个组件, 就没有办法触发scroll-view组件中的事件。

 2.scroll-view没有设置固定高, 在css中设置height, 设置多高就在多高的区域展现.

有几个较为重要的事件

@refresherpulling 自定义下拉刷新控件被下拉

​
   // 自定义下拉刷新控件被下拉
      onPulling(e) {
        if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
        this.triggered = true;
      },

​

 @refresherrefresh 自定义下拉刷新被触发

   // 下拉刷新触发
      onRefresh() {
        setTimeout(() => {
          this.triggered = false;
          // this.getRecord();/* 调用接口 */
        }, 2000);
      }