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

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

@ -23,58 +23,59 @@
<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"
<uni-swipe-action ref="swipeAction"> :style="{ height: mescrollHeight + 'px' }">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index"> <uni-swipe-action ref="swipeAction">
<uni-swipe-action-item :right-options="Options" <block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
@click="handleSwipeClick($event, item, index)" class="device-card" <uni-swipe-action-item :right-options="Options" @click="handleSwipeClick($event, item, index)"
:style="{ border: item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }"> class="device-card"
<view @click.stop="handleFile(item)"> :style="{ border: item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }">
<view class="device-header"> <view @click.stop="handleFile(item)">
<view class="deviceIMG"> <view class="device-header">
<image :src="item.devicePic" class="IMG" mode="aspectFit"></image> <view class="deviceIMG">
</view> <image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
<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> </view>
<view class="device-callpolice" <view class="device-name">
v-if="item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1"> <view>设备:{{ item.deviceName }}</view>
报警中</view> <view class="ID">
<view v-if="item.communicationMode == 1"> <view class="ID" v-if="item.communicationMode == 0">ID:{{
<view class="device-status online">已连接</view> item.deviceImei }}
<view class="device-status unline">未连接</view> </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>
</view> </view>
<image src="/static/images/common/cires.png" class="circle" mode="aspectFit"></image> <view class="device-callpolice"
</uni-swipe-action-item> v-if="item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1">
</block> 报警中</view>
</uni-swipe-action> <view v-if="item.communicationMode == 1">
<!-- 加载状态提示 --> <view class="device-status online">已连接</view>
<view class="loading-status"> <view class="device-status unline">未连接</view>
<text v-if="loading">加载中...</text> </view>
<text v-if="finished">没有更多数据了</text> </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> </mescroll-uni>
<view v-else class="noDATA"> <view v-else class="noDATA">
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons> <view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
@ -210,23 +211,25 @@
auto: false auto: false
}, },
upOption: { upOption: {
auto: false, auto: false,
noMoreSize: 1, noMoreSize: 0,
offset: 80, offset: 50,
empty: { isLock: false,
tip: '暂无相关数据' empty: {
} 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', () => {
@ -974,4 +979,4 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
</style> </style>

2
pages/common/login/index.vue
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,