uniapp小程序下拉刷新
·
<template>
<view class="container">
<!-- 下拉刷新 -->
<scroll-view class="chat-list" scroll-y="true" @scrolltolower="loadMore" refresher-enabled
:refresher-triggered="isRefreshing" @refresherrefresh="refreshData">
<uni-list>
<uni-list-chat title="uni-app" v-for="(item, index) in chatList" :key="index"
:avatar="item.avatar || '/static/images/zwtp.png'" :title="item.deviceCode" :note="item.loadName"
showArrow link="navigateTo" @click="goToDetail(item)" />
</uni-list>
</scroll-view>
</view>
</template>
export default {
data() {
return {
chatList: [],
isRefreshing: false, // 是否下拉刷新
hasMore: true // 是否有更多数据
};
},
onLoad() {
this.getChatList(); // 页面加载时获取数据
},
methods: {
getChatList() {
listHeating(this.queryParams).then(response => {
if (this.queryParams.pageNum === 1) {
this.chatList= response.rows;
} else {
this.chatList= [...this.chatList, ...response.rows];
}
this.hasMore = response.rows.length === this.queryParams.pageSize;
if (this.hasMore) this.queryParams.pageNum++; // 只有数据获取成功才增加页码
}).finally(() => {
this.isRefreshing = false; // 关闭刷新状态
});
},
// 下拉刷新
refreshData() {
this.isRefreshing = true;
this.queryParams.pageNum = 1;
this.getChatList();
},
// 上拉加载更多
loadMore() {
if (!this.hasMore) return;
this.getChatList();
},
}
}
.container {
padding: 10px;
height: 100vh;//设置高度
display: flex;
flex-direction: column;
}
更多推荐
所有评论(0)