uniapp局部的下拉刷新以及组件出现的问题

局部的下拉刷新

一.scroll-view实例

可滚动视图区域, 用于区域滚动. 区域滚动的性能不及页面滚动

<scroll-view class="scroll"
             scroll-y="true"
             :refresher-enabled='refresherEnabled'
             @refresherpulling="onPulling"
             @refresherrefresh="onRefresh"
             @refresherrestore="onRestore"
             @refresherabort="onAbort"
             :refresher-triggered="triggered">
	<view></view>
</scroll-view>

data () {
    return {
      // 开启下拉
      refresherEnabled: true,
      //
      triggered: false,
    }
}
methods: {
    //下拉过程的函数
    onPulling (e) {
    },
    //松手后执行下拉事件的函数
    onRefresh () {
      if (this._freshing) return;
      this.triggered = 'restore';
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000)
      //获取数据的函数
      this.current = 1
      this.getData()
    },
    //开始结束下拉的函数
    onRestore () {
      this.triggered = 'restore'; // 关闭动画
    },
    //结束下拉函数
    onAbort () { },
}

二.属性说明:

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
show-scrollbar	Boolean	false	控制是否出现滚动条
refresher-enabled	Boolean	false	开启自定义下拉刷新
refresher-threshold	number	45	设置自定义下拉刷新阈值
refresher-default-style	string	“black”	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式
refresher-background	string	“#FFF”	设置自定义下拉刷新区域背景颜色
refresher-triggered	boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
enable-flex	boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。
scroll-anchoring	boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling	EventHandle		自定义下拉刷新控件被下拉
@refresherrefresh	EventHandle		自定义下拉刷新被触发
@refresherrestore	EventHandle		自定义下拉刷新被复位
@refresherabort	EventHandle		自定义下拉刷新被中止

三.出现的问题

1. 高度问题

   使用时要固定高度, 不然不会出现效果. 可以使用js计算高度, 也可以使用样式来自动拉伸，如使用flex布局.
   用其他布局要注意, 脱离文档流时默认没有高, 也不会出现效果.

2. 下拉不回弹

   this.triggered = 'restore';
   

   triggered变量是来控制关闭下拉动作的, 可以在onRefresh这个函数中关闭

3. 刚打开就执行下拉

   在官方文档的例子中, 在onLoad()中的内容删除即可

   onLoad() {
       this._freshing = false;
       setTimeout(() => {
           this.triggered = true;
       }, 1000)
   },