uniapp scroll组件下拉刷新异步更新数据列表

前言

如图所示，下拉刷新，更新聊天列表。

开始

设置refresher-enabled=“true”，开启自定义下拉刷新
设置refresher-default-style和refresher-background，可以自定义下拉刷新的样式
@refresherrefresh为监听自定义下拉刷新被触发的事件，在里面可以写异步取数据的操作
设置refresher-triggered属性可以自定义下拉刷新的状态

      <scroll-view  class="scroll-Y" 
      		scroll-y="true"
      		refresher-enabled="true"
      		refresher-default-style="white"
			refresher-background="#121214"
			@refresherrefresh="getChatList('refresh')" 
			:refresher-triggered="refresherTriggered">
			<view class="chat-list-item" 
				v-for="(item,index) in chatList" :key="item.id"
				@click="goChat(item)">
				. . .
				</view>
			</view>
		</scroll-view>

let refresherTriggered = ref(false)
async function getChatList(type){
		 (type == 'refresh') && (refresherTriggered.value = true)
		let res = await ... // 异步操作
		if(type == 'refresh'){
		    // 加倒计时是让下拉刷新的效果稍微长一些，有个肉眼看到的过渡效果
			let timer = setTimeout(()=>{
				refresherTriggered.value = false;
				clearTimeout(timer)
			},500)
		}
	}

后记

在此记录这个问题的解决方法，并能提供一些思路给正在有此困扰的朋友。有任何问题可以留言一起讨论。