146 lines
2.9 KiB
Vue
146 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<view class="pagination-container">
|
||
|
|
<!-- 列表内容 -->
|
||
|
|
<scroll-view
|
||
|
|
class="scroll-view"
|
||
|
|
scroll-y
|
||
|
|
@scrolltolower="onLoadMore"
|
||
|
|
refresher-enabled
|
||
|
|
@refresherrefresh="onRefresh"
|
||
|
|
:refresher-triggered="isRefreshing"
|
||
|
|
refresher-default-style="white"
|
||
|
|
:style="{ height: scrollHeight }"
|
||
|
|
>
|
||
|
|
<!-- 空状态 -->
|
||
|
|
<view v-if="list.length === 0 && !loading" class="empty-state">
|
||
|
|
<image :src="emptyImage" mode="aspectFit" class="empty-image"></image>
|
||
|
|
<text class="empty-text">{{ emptyText }}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 列表内容 -->
|
||
|
|
<view v-else>
|
||
|
|
<slot :list="list"></slot>
|
||
|
|
|
||
|
|
<!-- 加载状态 -->
|
||
|
|
<view v-if="loading" class="loading-state">
|
||
|
|
<text class="loading-text">加载中...</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 没有更多数据 -->
|
||
|
|
<view v-if="!hasMore && list.length > 0" class="no-more-state">
|
||
|
|
<text class="no-more-text">{{ noMoreText }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Pagination',
|
||
|
|
props: {
|
||
|
|
// 列表数据
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
// 是否还有更多数据
|
||
|
|
hasMore: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
// 是否正在加载
|
||
|
|
loading: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
// 是否正在刷新
|
||
|
|
isRefreshing: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
// 滚动区域高度
|
||
|
|
scrollHeight: {
|
||
|
|
type: String,
|
||
|
|
default: '60vh'
|
||
|
|
},
|
||
|
|
// 空状态图片
|
||
|
|
emptyImage: {
|
||
|
|
type: String,
|
||
|
|
default: 'https://api.ccttiot.com/smartmeter/img/static/uEiNJh8Rfurw9ORQzlit'
|
||
|
|
},
|
||
|
|
// 空状态文字
|
||
|
|
emptyText: {
|
||
|
|
type: String,
|
||
|
|
default: '暂无数据'
|
||
|
|
},
|
||
|
|
// 没有更多数据文字
|
||
|
|
noMoreText: {
|
||
|
|
type: String,
|
||
|
|
default: '没有更多数据了...'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 上拉加载更多
|
||
|
|
onLoadMore() {
|
||
|
|
if (!this.loading && this.hasMore) {
|
||
|
|
this.$emit('loadMore')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 下拉刷新
|
||
|
|
onRefresh() {
|
||
|
|
this.$emit('refresh')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.pagination-container {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.scroll-view {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-state {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 200rpx 0;
|
||
|
|
|
||
|
|
.empty-image {
|
||
|
|
width: 480rpx;
|
||
|
|
height: 373rpx;
|
||
|
|
margin-bottom: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty-text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-state {
|
||
|
|
text-align: center;
|
||
|
|
padding: 40rpx 0;
|
||
|
|
|
||
|
|
.loading-text {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-more-state {
|
||
|
|
text-align: center;
|
||
|
|
padding: 40rpx 0;
|
||
|
|
|
||
|
|
.no-more-text {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|