设备状态ui提交
parent
5df6f6ff84
commit
e49094c19e
|
|
@ -1,7 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="message-page">
|
<view class="message-page">
|
||||||
<!-- 消息列表 -->
|
<!-- 消息列表 -->
|
||||||
<scroll-view scroll-y class="message-list">
|
<scroll-view
|
||||||
|
:scroll-y="true"
|
||||||
|
class="message-list"
|
||||||
|
:refresher-enabled="true"
|
||||||
|
:refresher-triggered="refreshing"
|
||||||
|
@refresherrefresh="onRefresh"
|
||||||
|
>
|
||||||
<view
|
<view
|
||||||
v-for="(item, index) in messageList"
|
v-for="(item, index) in messageList"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
|
@ -35,6 +41,7 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
refreshing: false, // 下拉刷新状态(新增)
|
||||||
messageList: [
|
messageList: [
|
||||||
{
|
{
|
||||||
time: '2026-03-26 22:19:00',
|
time: '2026-03-26 22:19:00',
|
||||||
|
|
@ -118,6 +125,25 @@ export default {
|
||||||
},
|
},
|
||||||
getSortDate() {
|
getSortDate() {
|
||||||
return this.messageList.sort((a, b) => new Date(a.time) - new Date(b.time));
|
return this.messageList.sort((a, b) => new Date(a.time) - new Date(b.time));
|
||||||
|
},
|
||||||
|
// 下拉刷新(新增,最小改动)
|
||||||
|
onRefresh() {
|
||||||
|
this.refreshing = true;
|
||||||
|
// 模拟接口请求延迟
|
||||||
|
setTimeout(() => {
|
||||||
|
// 生成10条新数据
|
||||||
|
const newData = Array.from({ length: 10 }, (_, i) => ({
|
||||||
|
time: '2026-03-27 12:00:00',
|
||||||
|
type: 'champion',
|
||||||
|
avatar: 'https://picsum.photos/id/999/60/60',
|
||||||
|
sender: '新用户' + i,
|
||||||
|
date: '03月27'
|
||||||
|
}));
|
||||||
|
// 插入到列表最前面
|
||||||
|
this.messageList = [...newData, ...this.messageList];
|
||||||
|
// 结束刷新状态
|
||||||
|
this.refreshing = false;
|
||||||
|
}, 800);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -133,6 +159,7 @@ export default {
|
||||||
/* 消息列表 */
|
/* 消息列表 */
|
||||||
.message-list {
|
.message-list {
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
|
height: 100vh; /* 修复scroll-view高度问题 */
|
||||||
}
|
}
|
||||||
.message-item {
|
.message-item {
|
||||||
margin: 30rpx 20rpx;
|
margin: 30rpx 20rpx;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue