公告列表分页加载

pages/announcementList/announcementList.vue

@@ -1,40 +1,87 @@
 <template>
   <view class="container">
-    <view v-for="item in announcementList" :key="item.id" class="item">
+    <view v-for="item in list" :key="item.id" class="item">
       <uni-card :extra="item.createTime" :title="item.title" @click="detail(item)"></uni-card>
     </view>
+
+    <!-- 加载更多状态 -->
+    <view v-if="noData && list.length > 0" class="load-more">
+      <text class="no-more-text">没有更多数据了</text>
+    </view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import { getArticleList } from '@/api/article/article.js'
+import { onUnload, onReachBottom } from '@dcloudio/uni-app'
 
-const announcementList = ref([])
+const list = ref([])
+const noData = ref(false)
+const loading = ref(false)
+
+//定义data参数
+const queryParams = {
+  pageNum: 1,
+  pageSize: 6,
+}
+
+// 获取列表
+const getList = async () => {
+  if (loading.value) return
 
-// 获取公告列表
-const fetchAnnouncementList = async () => {
   try {
-    const res = await getArticleList({
+    loading.value = true
-      pageNum: '1',
+    let res = await getArticleList(queryParams)
-      pageSize: '10',
+
-    })
+    // 确保 res.data 存在且是数组
-    console.log('文章列表:', res.rows)
+    const newData = res?.rows || []
-    announcementList.value = res.rows || []
+
+    // 如果是第一页，直接替换数据
+    if (queryParams.pageNum === 1) {
+      list.value = newData
+    } else {
+      list.value = [...list.value, ...newData]
+    }
+
+    if (queryParams.pageNum * queryParams.pageSize >= res.total) {
+      noData.value = true
+    }
+
+    console.log('订单列表:', list.value)
   } catch (error) {
-    console.error('获取公告列表失败:', error)
+    console.error('获取订单列表失败:', error)
+    uni.showToast({
+      title: '获取订单列表失败',
+      icon: 'none',
+    })
+  } finally {
+    loading.value = false
   }
 }
 
-const detail = (item) => {
+const detail = item => {
   uni.navigateTo({
-    url: `/pages/announcementList/announcementDetail?id=${item.id}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createTime=${encodeURIComponent(item.createTime)}` 
+    url: `/pages/announcementList/announcementDetail?id=${item.id}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createTime=${encodeURIComponent(item.createTime)}`,
   })
 }
 
 // 页面加载时获取数据
 onMounted(() => {
-  fetchAnnouncementList()
+  getList()
+})
+
+onUnload(() => {
+  // 清理数据
+  list.value = []
+  noData.value = false
+  loading.value = false
+})
+
+onReachBottom(() => {
+  if (noData.value || loading.value) return
+  queryParams.pageNum++
+  getList()
 })
 </script>
 
@@ -53,4 +100,14 @@ onMounted(() => {
   line-height: 1.6;
   color: #666;
 }
+
+.load-more {
+  margin-top: 20rpx;
+  text-align: center;
+
+  .no-more-text {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
 </style>