前言
如图所示,下拉刷新,更新聊天列表。
开始
设置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)}}
后记
在此记录这个问题的解决方法,并能提供一些思路给正在有此困扰的朋友。有任何问题可以留言一起讨论。