公告列表采用分页组件
This commit is contained in:
WindowBird
parent
5e09db3d16
commit
de2ac5d37c
|
|
@ -6,11 +6,11 @@
|
|||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">{{ loadingText }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else-if="noMore && list.length > 0" class="no-more-state">
|
||||
<text class="no-more-text">{{ noMoreText }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view v-else-if="list.length === 0 && !loading" class="empty-state">
|
||||
<view class="empty-icon">{{ emptyIcon }}</view>
|
||||
<text class="empty-text">{{ emptyText }}</text>
|
||||
|
|
@ -24,19 +24,19 @@
|
|||
共 {{ total }} 条，第 {{ currentPage }} / {{ totalPages }} 页
|
||||
</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="pager-controls">
|
||||
<button
|
||||
class="pager-btn prev-btn"
|
||||
<button
|
||||
class="pager-btn prev-btn"
|
||||
:disabled="currentPage <= 1"
|
||||
@click="handlePageChange(currentPage - 1)"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
|
||||
|
||||
<view class="page-numbers">
|
||||
<button
|
||||
v-for="page in visiblePages"
|
||||
<button
|
||||
v-for="page in visiblePages"
|
||||
:key="page"
|
||||
:class="['page-btn', { active: page === currentPage }]"
|
||||
@click="handlePageChange(page)"
|
||||
|
|
@ -44,9 +44,9 @@
|
|||
{{ page }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="pager-btn next-btn"
|
||||
|
||||
<button
|
||||
class="pager-btn next-btn"
|
||||
:disabled="currentPage >= totalPages"
|
||||
@click="handlePageChange(currentPage + 1)"
|
||||
>
|
||||
|
|
@ -65,114 +65,114 @@ 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: {
|
||||
// 总页数
|
||||
totalPages() {
|
||||
return Math.ceil(this.total / this.pageSize)
|
||||
},
|
||||
|
||||
|
||||
// 可见的页码
|
||||
visiblePages() {
|
||||
const pages = []
|
||||
const half = Math.floor(this.visiblePageCount / 2)
|
||||
let start = Math.max(1, this.currentPage - half)
|
||||
let end = Math.min(this.totalPages, start + this.visiblePageCount - 1)
|
||||
|
||||
|
||||
// 调整起始位置
|
||||
if (end - start + 1 < this.visiblePageCount) {
|
||||
start = Math.max(1, end - this.visiblePageCount + 1)
|
||||
}
|
||||
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i)
|
||||
}
|
||||
|
||||
|
||||
return pages
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 处理页码变化
|
||||
handlePageChange(page) {
|
||||
if (page < 1 || page > this.totalPages || page === this.currentPage) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
this.$emit('page-change', page)
|
||||
},
|
||||
|
||||
|
||||
// 重置分页状态
|
||||
reset() {
|
||||
this.$emit('reset')
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -192,7 +192,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
|
||||
|
||||
.loading-spinner {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
|
@ -202,7 +202,7 @@ export default {
|
|||
animation: spin 1s linear infinite;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
|
@ -211,7 +211,7 @@ export default {
|
|||
|
||||
.no-more-state {
|
||||
padding: 20rpx 0;
|
||||
|
||||
|
||||
.no-more-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
|
@ -220,12 +220,12 @@ export default {
|
|||
|
||||
.empty-state {
|
||||
padding: 40rpx 0;
|
||||
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
|
|
@ -242,7 +242,7 @@ export default {
|
|||
.pager-info {
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
|
||||
.pager-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
|
@ -264,13 +264,13 @@ export default {
|
|||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
|
||||
|
||||
&:disabled {
|
||||
color: #ccc;
|
||||
background: #f5f5f5;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
|
@ -289,20 +289,24 @@ export default {
|
|||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 26rpx;
|
||||
|
||||
|
||||
&.active {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
|
||||
&:not(.active):active {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<text class="no-more-text">没有更多数据了</text>
|
||||
</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 { 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 loading = ref(false)
|
||||
|
||||
//定义data参数
|
||||
const queryParams = {
|
||||
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 { list, loading, noMore, pagination, getList, loadMore } = usePagination({
|
||||
fetchData: getArticleList,
|
||||
defaultParams: {},
|
||||
mode: 'loadMore',
|
||||
pageSize: 9,
|
||||
})
|
||||
|
||||
const detail = item => {
|
||||
uni.navigateTo({
|
||||
|
|
@ -71,18 +43,15 @@ onMounted(() => {
|
|||
getList()
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
// 清理数据
|
||||
list.value = []
|
||||
noData.value = false
|
||||
loading.value = false
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
if (noData.value || loading.value) return
|
||||
queryParams.pageNum++
|
||||
getList()
|
||||
})
|
||||
// 处理页码变化
|
||||
const handlePageChange = page => {
|
||||
console.log('页码变化:', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user