liubiao/APP
1
0
Fork 0
forked from dyf/APP
Code Pull Requests Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

173
pages/common/index/index.vue
View File

@ -23,57 +23,58 @@
<view class="Sendmessage" @click="location">位置</view>
<view class="Sendmessage" @click="handleSend">发送信息</view>
</view>
<mescroll-uni v-if="deviceList.length > 0" class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" :fixed="false">
<uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
<uni-swipe-action-item :right-options="Options"
@click="handleSwipeClick($event, item, index)" class="device-card"
: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 class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
</view>
<view class="device-name">
<view>设备:{{ item.deviceName }}</view>
<view class="ID">
<view class="ID" v-if="item.communicationMode == 0">ID:{{
item.deviceImei }}
</view>
<view class="ID" v-else>ID:{{ item.deviceMac }}</view>
<!-- 在线状态 -->
<view class="onlines"
v-if="item.communicationMode == 0 && item.onlineStatus == 1">在线
</view>
<!-- 离线状态 -->
<view class="offlines"
v-if="item.communicationMode == 0 && item.onlineStatus == 0">离线
</view>
<view class="offlines"
v-if="item.communicationMode == 0 && item.onlineStatus == 2">故障
</view>
<view>电量：{{ item.battery || '0' }}%</view>
</view>
</view>
<mescroll-uni v-if="deviceList.length > 0" class="device-list" @init="mescrollInit" @down="downCallback"
@up="upCallback" :up="upOption" :down="downOption" :fixed="false"
:style="{ height: mescrollHeight + 'px' }">
<uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
<uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
class="device-card"
: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 class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
</view>
<view class="device-callpolice"
v-if="item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1">
报警中</view>
<view v-if="item.communicationMode == 1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
<view class="device-name">
<view>设备:{{ item.deviceName }}</view>
<view class="ID">
<view class="ID" v-if="item.communicationMode == 0">ID:{{
item.deviceImei }}
</view>
<view class="ID" v-else>ID:{{ item.deviceMac }}</view>
<!-- 在线状态 -->
<view class="onlines"
v-if="item.communicationMode == 0 && item.onlineStatus == 1">在线
</view>
<!-- 离线状态 -->
<view class="offlines"
v-if="item.communicationMode == 0 && item.onlineStatus == 0">离线
</view>
<view class="offlines"
v-if="item.communicationMode == 0 && item.onlineStatus == 2">故障
</view>
<view>电量：{{ item.battery || '0' }}%</view>
</view>
</view>
</view>
<image src="/static/images/common/cires.png" class="circle" mode="aspectFit"></image>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<!-- 加载状态提示 -->
<view class="loading-status">
<text v-if="loading">加载中...</text>
<text v-if="finished">没有更多数据了</text>
</view>
<view class="device-callpolice"
v-if="item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1">
报警中</view>
<view v-if="item.communicationMode == 1">
<view class="device-status online">已连接</view>
<view class="device-status unline">未连接</view>
</view>
</view>
<image src="/static/images/common/cires.png" class="circle" mode="aspectFit"></image>
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<!-- 加载状态提示 -->
<view class="loading-status">
<text v-if="loading">加载中...</text>
<text v-if="finished">没有更多数据了</text>
</view>
</mescroll-uni>
<view v-else class="noDATA">
@ -210,23 +211,25 @@
auto: false
},
upOption: {
auto: false,
noMoreSize: 1,
offset: 80,
empty: {
tip: '暂无相关数据'
}
auto: false,
noMoreSize: 0,
offset: 50,
isLock: false,
empty: {
tip: '暂无数据',
hideScroll: false
}
},
page: 1, // 当前页码
size: 10, // 每页条数
size: 12, // 每页条数
total: 0, // 总数据量
loadedCount: 0,
loading: false,
finished: false,
deviceId: '',
deviceName: "", //重命名
activeTabInfo: ''
activeTabInfo: '',
mescrollHeight: 0,
}
},
methods: {
@ -237,39 +240,34 @@
downCallback() {
const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
const tempList = [...this.deviceList];
// 重置分页参数
this.page = 1;
this.finished = false;
this.loadedCount = 0;
this.total = 0; // 重置总数
this.getData(currentDeviceType)
.then(() => {
this.mescroll.endDownScroll(true);
})
.catch(() => {
this.deviceList = tempList;
this.mescroll.endDownScroll(false);
});
},
// 上拉加载
upCallback() {
// 防止重复加载
if (this.finished || this.loading) {
if (this.loading) {
this.mescroll.endUpScroll(false);
return;
}
const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
this.getData(currentDeviceType)
.then(() => {
const hasMore = this.loadedCount < this.total;
console.log(`上拉加载 - 已加载: ${this.loadedCount}, 总数: ${this.total}, 是否还有更多: ${hasMore}`);
// 如果本次加载的数据量为0，则说明没有更多数据
const hasMore = this.deviceList.length > 0 && this.deviceList.length % this.size === 0;
this.mescroll.endUpScroll(hasMore);
})
.catch(() => {
// 失败时回退页码
this.page--;
this.mescroll.endUpScroll(false);
});
@ -332,53 +330,48 @@
this.page = 1;
this.finished = false;
this.loadedCount = 0;
this.total = 0; // 重置总数
const deviceType = tab.id === '' ? undefined : tab.id;
this.$nextTick(() => {
this.getSystemInfoSyncH();
});
this.getData(deviceType);
if (this.mescroll) {
this.mescroll.resetUpScroll();
}
},
// 获取设备列表 - 核心修复
// 获取设备列表
getData(deviceType = '') {
return new Promise((resolve, reject) => {
if (this.loading || this.finished) {
reject('正在加载或已无更多数据');
return;
}
this.loading = true;
let data = {
pageNum: this.page,
pageSize: this.size,
deviceType: deviceType
}
deviceInfo(data).then((res) => {
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 => ({
...device,
showConfirm: false
}));
this.loadedCount += newDevices.length;
console.log(`第${this.page}页加载 - 新增: ${newDevices.length}, 累计: ${this.loadedCount}`);
// 数据累加
if (this.page === 1) {
this.total = Number(res.total) || 0;
this.deviceList = newDevices;
this.loadedCount = newDevices.length;
} else {
this.deviceList = [...this.deviceList, ...newDevices];
this.loadedCount += newDevices.length;
}
// 判断是否加载完成
if (this.loadedCount >= this.total || newDevices.length < this.size) {
const hasMoreData = this.loadedCount < this.total;
if (!hasMoreData) {
this.finished = true;
} else {
}
if (hasMoreData) {
this.page++;
}
resolve();
@ -564,7 +557,8 @@
onIntall() {
this.page = 1;
this.finished = false;
this.loadedCount = 0; // 重置计数
this.loadedCount = 0;
this.total = 0;
const deviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
this.getData(deviceType);
setTimeout(() => {
@ -594,8 +588,19 @@
})
.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() {
this.getSystemInfoSyncH()
this.getTab()
this.onIntall()
uni.$on('refreshDeviceList', () => {

2
pages/common/login/index.vue
View File

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