uniapp自定义scroll-view的下拉样式动画

Preloaders.net - Heart loading GIF, SVG and APNG animation 

1.因为要自定义下拉动画，所以不需要默认刷新样式，设置为refresher-default-style="none"

slot="refresher" 自定义刷新样式

2.使用插槽，两种方式。这样下拉时就会显示插槽内容。

第一种 

<<view slot="refresher">刷新样式</view> 

第二种
 <template #refresher>
         <view class="text-center" style="width:100%">
                   刷新样式
          </view>
 </template>

<scroll-view :scroll-y="true" :scroll-anchoring="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onDownRefresh" @refresherrestore="onRestore" 
            @scrolltolower="lower" :refresher-threshold="100" 
			refresher-background="transparent" refresher-default-style="none"
			style="flex: 1; overflow: hidden; -webkit-overflow-scrolling: touch">

			<!-- <view slot="refresher">内容</view> -->
			<template #refresher>
			   <view class="text-center" style="width:100%">
			       1111111
			   </view>
			</template>
</scroll-view>

 onRefresh() {  //自定义下拉刷新被触发
    if (this._freshing) return;
    this._freshing = true;
    setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
    }, 3000)
	console.log("onRefresh");
  },