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");
},
3.唯二的评论都质疑有没有这个插槽,因为官方文档中没写。
这个也是我开发中遇到的需求,百度到的方法,实测能用。
怎么验证呢?去看源码,HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\src\core\view\components 找到scroll-view组件。源码中有这么一句。

更多推荐
所有评论(0)