公告列表采用分页组件

components/pagination/pagination.vue

@@ -65,71 +65,71 @@ export default {
     mode: {
       type: String,
       default: 'loadMore',
-      validator: value => ['loadMore', 'pager'].includes(value)
+      validator: value => ['loadMore', 'pager'].includes(value),
     },
 
     // 数据列表
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
 
     // 总数据量
     total: {
       type: Number,
-      default: 0
+      default: 0,
     },
 
     // 当前页码
     currentPage: {
       type: Number,
-      default: 1
+      default: 1,
     },
 
     // 每页数量
     pageSize: {
       type: Number,
-      default: 10
+      default: 10,
     },
 
     // 是否正在加载
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
     // 是否没有更多数据
     noMore: {
       type: Boolean,
-      default: false
+      default: false,
     },
 
     // 自定义文本
     loadingText: {
       type: String,
-      default: '正在加载...'
+      default: '正在加载...',
     },
 
     noMoreText: {
       type: String,
-      default: '没有更多数据了'
+      default: '没有更多数据了',
     },
 
     emptyText: {
       type: String,
-      default: '暂无数据'
+      default: '暂无数据',
     },
 
     emptyIcon: {
       type: String,
-      default: '📋'
+      default: '📋',
     },
 
     // 分页器显示的页码数量
     visiblePageCount: {
       type: Number,
-      default: 5
+      default: 5,
-    }
+    },
   },
 
   computed: {
@@ -155,7 +155,7 @@ export default {
       }
 
       return pages
-    }
+    },
   },
 
   methods: {
@@ -171,8 +171,8 @@ export default {
     // 重置分页状态
     reset() {
       this.$emit('reset')
-    }
+    },
-  }
+  },
 }
 </script>
 
@@ -302,7 +302,11 @@ export default {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>

pages/announcementList/announcementList.vue

@@ -4,61 +4,33 @@
       <uni-card :extra="item.createTime" :title="item.title" @click="detail(item)"></uni-card>
     </view>
 
-    <!-- 加载更多状态 -->
+    <!-- 分页组件 -->
-    <view v-if="noData && list.length > 0" class="load-more">
+    <pagination
-      <text class="no-more-text">没有更多数据了</text>
+      :current-page="pagination.currentPage"
-    </view>
+      :list="list"
+      :loading="loading"
+      :mode="'loadMore'"
+      :no-more="noMore"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      @page-change="handlePageChange"
+    />
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { getArticleList } from '@/api/article/article.js'
-import { onUnload, onReachBottom } from '@dcloudio/uni-app'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { usePagination } from '@/composables/usePagination.js'
 
-const list = ref([])
+// 使用分页组合式函数
-const noData = ref(false)
+const { list, loading, noMore, pagination, getList, loadMore } = usePagination({
-const loading = ref(false)
+  fetchData: getArticleList,
-
+  defaultParams: {},
-//定义data参数
+  mode: 'loadMore',
-const queryParams = {
+  pageSize: 9,
-  pageNum: 1,
+})
-  pageSize: 6,
-}
-
-// 获取列表
-const getList = async () => {
-  if (loading.value) return
-
-  try {
-    loading.value = true
-    let res = await getArticleList(queryParams)
-
-    // 确保 res.data 存在且是数组
-    const newData = 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)
-    uni.showToast({
-      title: '获取订单列表失败',
-      icon: 'none',
-    })
-  } finally {
-    loading.value = false
-  }
-}
 
 const detail = item => {
   uni.navigateTo({
@@ -71,18 +43,15 @@ onMounted(() => {
   getList()
 })
 
-onUnload(() => {
+// 上拉加载更多
-  // 清理数据
+onReachBottom(() => {
-  list.value = []
+  loadMore()
-  noData.value = false
-  loading.value = false
 })
 
-onReachBottom(() => {
+// 处理页码变化
-  if (noData.value || loading.value) return
+const handlePageChange = page => {
-  queryParams.pageNum++
+  console.log('页码变化:', page)
-  getList()
+}
-})
 </script>
 
 <style lang="scss" scoped>

pages/myOrder/myOrder.vue

@@ -73,7 +73,6 @@ import { onMounted } from 'vue'
 import { onReachBottom } from '@dcloudio/uni-app'
 import { usePagination } from '@/composables/usePagination.js'
 import { getMyOrder } from '@/api/order/myOrder.js'
-import Pagination from '@/components/pagination/pagination.vue'
 
 // 使用分页组合式函数
 const { list, loading, noMore, pagination, getList, loadMore } = usePagination({