uniapp小程序局部下拉刷新

html代码： 

         refresher-enabled="true" //开启下拉刷新
         :refresher-triggered="triggered" // triggered控制开启和关闭下拉刷新.
         :refresher-threshold="100"
         refresher-background="#FFF"
         @refresherpulling="onPulling"
         @refresherrefresh="onRefresh" 
         @refresherrestore="onRestore"
         @refresherabort="onAbort"

<scroll-view class="scroll-container" scroll-y="true" 
         refresher-enabled="true"
         :refresher-triggered="triggered"
		 :refresher-threshold="100"
         refresher-background="#FFF"
         @refresherpulling="onPulling"
		 @refresherrefresh="onRefresh" 
         @refresherrestore="onRestore"
         @refresherabort="onAbort">
</scroll-view>

js代码如下： 

let triggered = ref(false);

//下拉没有松手执行此事件
	const onPulling = () => {
		triggered.value = true;
	};

//大于阀值并且松手了会触发刷新（下拉刷新要执行的事件写在这里）
	const onRefresh = () => {
		setTimeout(() => {
			triggered.value = false;
		}, 600);
     //下拉刷新执行的事件
		getList()
		getClassifyList()
		getBanner()
	};

//这是你下拉超过阀值然后没有松手又滑回去小于阀值,只做状态显示修改不触发更新
	const onRestore = () => {
		setTimeout(() => {
			triggered.value = false
		}, 100)
	};

//中断下拉,也是只做状态修改
	const onAbort = () => {
		setTimeout(() => {
			triggered.value = false
		}, 100)
	};

//页面最大的盒子，也就是父级
.container {
		padding-bottom: 200rpx;
		color: #333;
		/* overflow: scroll; */
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden
	}
// 直接设置flex：1高度依然不会自适应，需要添加一个默认高度1px就可以自适应了。
.scroll-container {
		flex: 1;
		overflow: scroll;
		height: 1px;
	}