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组件。源码中有这么一句。

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐