附近的网站设计开发网站开发 工具

前言

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

开始

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

后记

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