<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;
	}

更多推荐