目录

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

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

前言

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

https://i-blog.csdnimg.cn/direct/d019173b3c8c4382977dcf67d34b52a6.png#pic_center

开始

设置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)
		}
	}

后记

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