时间展示优化

pages/news/subpages/deviceCenter/index.vue

@@ -6,19 +6,23 @@
         :scroll-y="true"
         class="message-list"
         :refresher-enabled="true"
-        :scroll-anchoring="true"
         refresher-background="#f5f5f5"
         :refresher-triggered="refreshing"
+        :scroll-into-view="scrollId"
+        :scroll-with-animation="false"
         @refresherrefresh="onRefresh"
     >
       <view
           v-for="(item, index) in messageList"
           :key="index"
+          :id="`item${item.id}`"
           @click="gotoDevice(item)"
           class="message-item"
       >
-        <!-- 时间标签 -->
+        <!-- 时间标签：如果是第一条或者与上一条时间不同才显示 -->
-        <view class="time-label">{{ formatTime(item.time) }}</view>
+        <view class="time-label" v-if="index === 0 || !isSameMinute(item.time, messageList[index - 1].time)">
+          {{ formatTime(item.time) }}
+        </view>
 
 <!--        &lt;!&ndash; 点赞消息卡片 &ndash;&gt;
         <view class="like-card" v-if="item.type === 'like'">
@@ -33,7 +37,7 @@
         <view class="champion-card">
           <view class="sender-info">
             <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
-            <text class="sender-text">{{ item.showTips }}</text>
+            <text class="sender-text">{{ "item  "+index+"   " +item.id }}</text>
           </view>
         </view>
       </view>
@@ -47,12 +51,15 @@
 </template>
 
 <script>
+import Uuid from "@/tuniao-ui/libs/function/uuid";
+
 export default {
   data() {
     return {
-      refreshing: false, // 下拉刷新状态（新增）
+      refreshing: false, // 下拉刷新状态
       messageList: [
         {
+          id: 'msg1',
           time: '2026-03-26 22:19:00',
           type: 'champion',
           avatar: 'https://picsum.photos/id/237/60/60',
@@ -60,40 +67,94 @@ export default {
           showTips: '03月26日排行榜冠军，恭喜你！'
         },
         {
+          id: 'msg2',
           time: '2026-03-25 22:19:00',
           showTips: '03月25日排行榜冠军，恭喜你！'
         },
         {
+          id: 'msg3',
           time: '2026-03-16 22:19:00',
           showTips: '03月25日排行榜冠军，恭喜你！'
         },
         {
+          id: 'msg4',
           time: '2026-03-26 05:36:00',
           type: 'like',
           avatar: 'https://picsum.photos/id/1005/60/60',
           sender: 'JFather'
         },
         {
+          id: 'msg5',
           time: '2026-03-24 22:19:00',
           type: 'step',
           rank: 160,
           steps: 1838
         },
         {
+          id: 'msg6',
           time: '2026-03-27 05:36:00',
           type: 'champion',
           avatar: 'https://picsum.photos/id/1012/60/60',
           sender: 'T薛策恒',
           date: '03月24'
+        },
+        {
+          id: 'msg7',
+          time: '2026-03-28 05:36:00',
+          type: 'like',
+          avatar: 'https://picsum.photos/id/1013/60/60',
+          sender: 'User7'
+        },
+        {
+          id: 'msg8',
+          time: '2026-03-29 05:36:00',
+          type: 'champion',
+          avatar: 'https://picsum.photos/id/1014/60/60',
+          sender: 'User8'
+        },
+        {
+          id: 'msg9',
+          time: '2026-03-30 05:36:00',
+          type: 'step',
+          rank: 200,
+          steps: 2000
+        },
+        {
+          id: 'msg10',
+          time: '2026-03-31 05:36:00',
+          type: 'like',
+          avatar: 'https://picsum.photos/id/1015/60/60',
+          sender: 'User10'
+        },
+        {
+          id: 'msg11',
+          time: '2026-04-01 05:36:00',
+          type: 'champion',
+          avatar: 'https://picsum.photos/id/1016/60/60',
+          sender: 'User11'
         }
       ],
-      isHaveOldData: true
+      isHaveOldData: true,
+      scrollId: null
     }
   },
   onShow() {
     this.getSortDate();
   },
   methods: {
+    goTo(id) {
+      this.scrollId = id;
+    },
+    // 判断两个时间是否是同一天同一分钟
+    isSameMinute(time1, time2) {
+      const date1 = new Date(time1);
+      const date2 = new Date(time2);
+      return date1.getFullYear() === date2.getFullYear() &&
+             date1.getMonth() === date2.getMonth() &&
+             date1.getDate() === date2.getDate() &&
+             date1.getHours() === date2.getHours() &&
+             date1.getMinutes() === date2.getMinutes();
+    },
     formatTime(timeStr) {
       const now = new Date();
       const target = new Date(timeStr);
@@ -146,6 +207,7 @@ export default {
       setTimeout(() => {
         // 生成10条新数据
         const newData = Array.from({ length: 10 }, (_, i) => ({
+          id: Uuid(16),
           time: '2026-03-27 12:00:00',
           type: 'champion',
           avatar: 'https://picsum.photos/id/999/60/60',
@@ -154,6 +216,12 @@ export default {
         }));
         // 插入到列表最前面
         this.messageList = [...newData, ...this.messageList];
+
+        // 在数据更新后设置 scrollId
+        this.$nextTick(() => {
+          this.scrollId = "item"+this.messageList[10].id;
+        });
+
         // 结束刷新状态
         this.refreshing = false;
       }, 800);