首页,下拉加载问题优化修改
This commit is contained in:
@ -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', () => {
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user