feat: 滚动加载

src/components/weatherInfo.vue

@@ -312,10 +312,11 @@ const currentDateText = computed(() => {
 <style lang="scss" scoped>
 .weather-info {
     width: 100%;
-    height: 58px;
+    // height: 58px;
+    height: 70px;
     border-radius: 14px;
     background-color: #ffffff;
-    padding: 0 12px;
+    padding: 10px 12px;
     box-sizing: border-box;
     transition: height 0.3s ease-in-out;
     overflow: hidden;

src/views/old_mini/home/index.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="home-index" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
-        <div class="banner-wrap" @click="handleBannerClick">
+        <!-- <div class="banner-wrap" @click="handleBannerClick">
             <img class="banner-img" :src="bannerObj?.media?.[0]" alt="" />
             <div class="banner-title">  
                 <span class="van-multi-ellipsis--l2">{{ bannerObj?.title }}</span>
             </div>
-        </div>
+        </div> -->
         <!-- 天气遮罩 -->
         <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
         <!-- 天气 -->
@@ -154,7 +154,6 @@ onActivated(() => {
         checkExistsEnabledScheme()
     }
     getBannerList();
-    isGarden.value = Boolean(localStorage.getItem("isGarden"));
     // 检测是否从创建农场页面成功返回
     if (route.query.showSuccess === "true") {
         // 清除URL参数，避免刷新页面时再次显示弹窗
@@ -266,12 +265,13 @@ const handleBannerClick = () => {
     .weather-info {
         width: calc(100% - 20px);
         position: absolute;
-        top: calc(200px - 28px);
+        // top: calc(200px - 28px);
+        top: 8px;
         left: 10px;
         z-index: 3;
     }
     .farm-monitor-container {
-        padding-top: 30px;
+        padding-top: 78px;
         display: flex;
         align-items: center;
         margin: 10px;

src/views/old_mini/home/subPages/knowledgeList.vue

@@ -1,45 +1,84 @@
 <template>
     <div class="service-records-page">
         <custom-header name="知识库"></custom-header>
-        <div class="record-list" v-if="knowledgeList && knowledgeList.length">
-            <div v-for="(item, index) in knowledgeList" :key="index" class="record-card">
-                <img class="thumb" :src="item.media && item.media[0]" alt="暂无图片" />
-                <div class="card-body" @click="handleItemClick(item)">
-                    <div class="card-body-left">
-                        <div class="title van-multi-ellipsis--l2">{{ item.title }}</div>
-                        <div class="date">{{ formatDate(item.createTime) }}</div>
+        <div class="record-list">
+            <list
+                v-model:loading="listLoading"
+                :finished="listFinished"
+                finished-text=""
+                @load="getKnowledgeList"
+            >
+                <div v-for="(item, index) in knowledgeList" :key="index" class="record-card">
+                    <img class="thumb" :src="item.media && item.media[0]" alt="暂无图片" />
+                    <div class="card-body" @click="handleItemClick(item)">
+                        <div class="card-body-left">
+                            <div class="title van-multi-ellipsis--l2">{{ item.title }}</div>
+                            <div class="date">{{ formatDate(item.createTime) }}</div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-        <div v-else class="empty-wrap">
-            <div class="empty-text">暂无数据</div>
+
+                <!-- 加载完成且无数据时的空状态 -->
+                <div v-if="!knowledgeList.length && listFinished" class="empty-wrap">
+                    <div class="empty-text">暂无数据</div>
+                </div>
+            </list>
         </div>
     </div>
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
 import customHeader from "@/components/customHeader.vue";
+import { List } from "vant";
 import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
 const route = useRoute();
+
 // 服务记录列表数据
 const knowledgeList = ref([]);
 const topicId = ref(6);
+
+// 分页与滚动加载状态
+const page = ref(1);
+const pageSize = ref(10);
+const listLoading = ref(false);
+const listFinished = ref(false);
+
 onMounted(() => {
-    topicId.value = route.query.topicId;
-    getKnowledgeList();
+    // 从路由获取当前知识库类型
+    topicId.value = route.query.topicId || 6;
+    // 不主动请求，交给 vant List 的 @load 触发首次加载
 });
 
 const getKnowledgeList = async () => {
+    if (listFinished.value) return;
+
+    listLoading.value = true;
     const params = {
-        page: 1,
-        limit: 10,
+        page: page.value,
+        limit: pageSize.value,
         topicId: topicId.value,
     };
-    VE_API.home.warningPageList(params).then(({ data }) => {
-        knowledgeList.value = data;
-    });
+
+    try {
+        const { data } = await VE_API.home.warningPageList(params);
+        const list = data || [];
+
+        if (page.value === 1) {
+            knowledgeList.value = list;
+        } else {
+            knowledgeList.value = [...knowledgeList.value, ...list];
+        }
+
+        // 如果返回数量小于页大小，认为没有更多数据了
+        if (list.length < pageSize.value) {
+            listFinished.value = true;
+        } else {
+            page.value += 1;
+        }
+    } finally {
+        listLoading.value = false;
+    }
 };
 
 const formatDate = (dateStr) => {