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");
},