83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
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'
|
|
|
|
// 使用分页组合式函数
|
|
const { list, loading, noMore, pagination, getList, loadMore } = usePagination({
|
|
fetchData: getArticleList,
|
|
defaultParams: {},
|
|
mode: 'loadMore',
|
|
pageSize: 9,
|
|
})
|
|
|
|
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(() => {
|
|
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>
|