首页,下拉加载问题优化修改

This commit is contained in:
fengerli
2025-10-08 14:08:45 +08:00
parent abd1753111
commit e042436c5b
2 changed files with 92 additions and 87 deletions

View File

@ -23,12 +23,13 @@
<view class="Sendmessage" @click="location">位置</view> <view class="Sendmessage" @click="location">位置</view>
<view class="Sendmessage" @click="handleSend">发送信息</view> <view class="Sendmessage" @click="handleSend">发送信息</view>
</view> </view>
<mescroll-uni v-if="deviceList.length > 0" class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" <mescroll-uni v-if="deviceList.length > 0" class="device-list" @init="mescrollInit" @down="downCallback"
:down="downOption" :fixed="false"> @up="upCallback" :up="upOption" :down="downOption" :fixed="false"
:style="{ height: mescrollHeight + 'px' }">
<uni-swipe-action ref="swipeAction"> <uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index"> <block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
<uni-swipe-action-item :right-options="Options" <uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
@click="handleSwipeClick($event, item, index)" class="device-card" class="device-card"
:style="{ border: item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }"> :style="{ border: item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }">
<view @click.stop="handleFile(item)"> <view @click.stop="handleFile(item)">
<view class="device-header"> <view class="device-header">
@ -211,22 +212,24 @@
}, },
upOption: { upOption: {
auto: false, auto: false,
noMoreSize: 1, noMoreSize: 0,
offset: 80, offset: 50,
isLock: false,
empty: { empty: {
tip: '暂无相关数据' tip: '暂无数据',
hideScroll: false
} }
}, },
page: 1, // 当前页码 page: 1, // 当前页码
size: 10, // 每页条数 size: 12, // 每页条数
total: 0, // 总数据量 total: 0, // 总数据量
loadedCount: 0, loadedCount: 0,
loading: false, loading: false,
finished: false, finished: false,
deviceId: '', deviceId: '',
deviceName: "", //重命名 deviceName: "", //重命名
activeTabInfo: '' activeTabInfo: '',
mescrollHeight: 0,
} }
}, },
methods: { methods: {
@ -237,39 +240,34 @@
downCallback() { downCallback() {
const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id; const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
const tempList = [...this.deviceList]; const tempList = [...this.deviceList];
// 重置分页参数 // 重置分页参数
this.page = 1; this.page = 1;
this.finished = false; this.finished = false;
this.loadedCount = 0; this.loadedCount = 0;
this.total = 0; // 重置总数
this.getData(currentDeviceType) this.getData(currentDeviceType)
.then(() => { .then(() => {
this.mescroll.endDownScroll(true); this.mescroll.endDownScroll(true);
}) })
.catch(() => { .catch(() => {
this.deviceList = tempList; this.deviceList = tempList;
this.mescroll.endDownScroll(false); this.mescroll.endDownScroll(false);
}); });
}, },
// 上拉加载 // 上拉加载
upCallback() { upCallback() {
// 防止重复加载 if (this.loading) {
if (this.finished || this.loading) {
this.mescroll.endUpScroll(false); this.mescroll.endUpScroll(false);
return; return;
} }
const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id; const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
this.getData(currentDeviceType) this.getData(currentDeviceType)
.then(() => { .then(() => {
const hasMore = this.loadedCount < this.total; // 如果本次加载的数据量为0则说明没有更多数据
console.log(`上拉加载 - 已加载: ${this.loadedCount}, 总数: ${this.total}, 是否还有更多: ${hasMore}`); const hasMore = this.deviceList.length > 0 && this.deviceList.length % this.size === 0;
this.mescroll.endUpScroll(hasMore); this.mescroll.endUpScroll(hasMore);
}) })
.catch(() => { .catch(() => {
// 失败时回退页码
this.page--; this.page--;
this.mescroll.endUpScroll(false); this.mescroll.endUpScroll(false);
}); });
@ -332,53 +330,48 @@
this.page = 1; this.page = 1;
this.finished = false; this.finished = false;
this.loadedCount = 0; this.loadedCount = 0;
this.total = 0; // 重置总数
const deviceType = tab.id === '' ? undefined : tab.id; const deviceType = tab.id === '' ? undefined : tab.id;
this.$nextTick(() => {
this.getSystemInfoSyncH();
});
this.getData(deviceType); this.getData(deviceType);
if (this.mescroll) { if (this.mescroll) {
this.mescroll.resetUpScroll(); this.mescroll.resetUpScroll();
} }
}, },
// 获取设备列表 - 核心修复 // 获取设备列表
getData(deviceType = '') { getData(deviceType = '') {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (this.loading || this.finished) { if (this.loading || this.finished) {
reject('正在加载或已无更多数据'); reject('正在加载或已无更多数据');
return; return;
} }
this.loading = true; this.loading = true;
let data = { let data = {
pageNum: this.page, pageNum: this.page,
pageSize: this.size, pageSize: this.size,
deviceType: deviceType deviceType: deviceType
} }
deviceInfo(data).then((res) => { deviceInfo(data).then((res) => {
if (res.code == 200) { if (res.code == 200) {
// 第一页加载时初始化总数据量
if (this.page === 1) {
this.total = res.total;
this.loadedCount = 0; // 重置计数
console.log(`第1页加载 - 总数据量: ${this.total}`);
}
const newDevices = res.rows.map(device => ({ const newDevices = res.rows.map(device => ({
...device, ...device,
showConfirm: false showConfirm: false
})); }));
this.loadedCount += newDevices.length;
console.log(`${this.page}页加载 - 新增: ${newDevices.length}, 累计: ${this.loadedCount}`);
// 数据累加
if (this.page === 1) { if (this.page === 1) {
this.total = Number(res.total) || 0;
this.deviceList = newDevices; this.deviceList = newDevices;
this.loadedCount = newDevices.length;
} else { } else {
this.deviceList = [...this.deviceList, ...newDevices]; this.deviceList = [...this.deviceList, ...newDevices];
this.loadedCount += newDevices.length;
} }
// 判断是否加载完成 const hasMoreData = this.loadedCount < this.total;
if (this.loadedCount >= this.total || newDevices.length < this.size) { if (!hasMoreData) {
this.finished = true; this.finished = true;
} else { }
if (hasMoreData) {
this.page++; this.page++;
} }
resolve(); resolve();
@ -564,7 +557,8 @@
onIntall() { onIntall() {
this.page = 1; this.page = 1;
this.finished = false; this.finished = false;
this.loadedCount = 0; // 重置计数 this.loadedCount = 0;
this.total = 0;
const deviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id; const deviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
this.getData(deviceType); this.getData(deviceType);
setTimeout(() => { setTimeout(() => {
@ -594,8 +588,19 @@
}) })
.filter(Boolean); .filter(Boolean);
}, },
// 动态计算屏幕高度
getSystemInfoSyncH() {
const sysInfo = uni.getSystemInfoSync();
const tabBarHeight = 80;
const sendBarHeight = 60;
const padding = 60;
const totalTopHeight = (this.navBarHeight) + (tabBarHeight + sendBarHeight + padding) * (sysInfo
.screenWidth / 750);
this.mescrollHeight = sysInfo.screenHeight - totalTopHeight;
}
}, },
onLoad() { onLoad() {
this.getSystemInfoSyncH()
this.getTab() this.getTab()
this.onIntall() this.onIntall()
uni.$on('refreshDeviceList', () => { uni.$on('refreshDeviceList', () => {

View File

@ -74,7 +74,7 @@
showView: false, showView: false,
phone: '13800138002', //手机号码 phone: '13800138002', //手机号码
code: "123456", //验证码 code: "123456", //验证码
password: "", password: "123456",
agreed: false, agreed: false,
isCounting: false, isCounting: false,
countdown: 0, countdown: 0,