HomeLease/pages/announcementList/announcementList.vue

<template>
  <view class="container">
    <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>

    <!-- 分页组件 -->
    <pagination
      :current-page="pagination.currentPage"
      :list="list"
      :loading="loading"
      :mode="'loadMore'"
      :no-more="noMore"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @page-change="handlePageChange"
    />
  </view>
</template>

<script setup>
import { onMounted } from 'vue'
import { getArticleList } from '@/api/article/article.js'
import { onReachBottom } from '@dcloudio/uni-app'
import { usePagination } from '@/composables/usePagination.js'
import Pagination from '@/components/pagination/pagination.vue'

// 使用分页组合式函数
const { list, loading, noMore, pagination, getList, loadMore } = usePagination({
  fetchData: getArticleList,
  defaultParams: {},
  mode: 'loadMore',
  pageSize: 15,
})

const detail = item => {
  uni.navigateTo({
    url: `/pages/announcementList/announcementDetail?id=${item.id}&title=${encodeURIComponent(item.title)}&content=${encodeURIComponent(item.content)}&createTime=${encodeURIComponent(item.createTime)}`,
  })
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})

// 上拉加载更多
onReachBottom(() => {
  console.log('触发上拉加载更多，当前状态:', {
    loading: loading.value,
    noMore: noMore.value,
    listLength: list.value.length,
    total: pagination.value.total,
  })
  loadMore()
})

// 处理页码变化
const handlePageChange = page => {
  console.log('页码变化:', page)
}
</script>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  padding: 20rpx;
}

.item {
  margin-bottom: 20rpx;
}

.uni-body {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
}

.load-more {
  margin-top: 20rpx;
  text-align: center;

  .no-more-text {
    font-size: 24rpx;
    color: #999;
  }
}
</style>