warst/warst-h5/components/c-scroll-paging/index.vue

<template>
	<scroll-view
		class="c_scroll_paging"
		v-bind="__attrs"
		@scrolltolower="scrolltolower"
		@refresherrefresh="onRefresh"
	>
		<slot></slot>

		<view class="footer" :class="{ 'footer-empty-box': imageName }">
			<!--  数据为空/加载失败显示  -->
			<statusView
				:imageName="imageName"
				:emptyImgStyle="emptyImgStyle"
				v-if="imageName"
			/>
			<u-loading-icon
				v-else-if="loading"
				size="16"
				text="加载中"
			></u-loading-icon>
			<u-divider v-else-if="noMore" text="没有更多"></u-divider>
		</view>
	</scroll-view>
</template>

<script>
import statusView from '@/components/statusView';
export default {
	name: 'CScrollPaging',
	model: {
		prop: 'value',
		event: 'change',
	},
	components: {
		statusView,
	},
	props: {
		value: {
			default: () => [],
			type: Array,
		},
		queryList: {
			// return接口的res
			type: Function,
			default: () => () => {},
		}, // function 加载数据,并且将分页作为参数返回
		pageSize: {
			type: Number,
			default: 10, // 每页显示的条数
		},
	},
	data() {
		return {
			imageName: '', // 暂无数据 或 数据加载失败
			loading: false,
			freshing: false,
			pageNum: 0, // 页数
			total: 0, // 总条数
			noMore: false, // 是否没有更多
		};
	},
	computed: {
		emptyImgStyle() {
			let __style = {};
			if (this.imageName === 'empty') {
				__style = {
					width: '207px',
					height: '208px',
				};
			}
			if (this.imageName === 'load-fail') {
				__style = {
					width: '200px',
					height: '141px',
				};
			}
			return __style;
		},
		__attrs() {
			return {
				'scroll-y': true,
				'refresher-enabled': true, // 开启自定义下拉刷新
				'refresher-triggered': this.freshing, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发
				...this.$attrs,
			};
		},
	},
	created() {
		this.scrolltolower();
	},
	methods: {
		async onRefresh() {
			// 下拉刷新被触发
			if (this.freshing) return;
			try {
				this.freshing = true; // 下拉的状态
				this.pageNum = 0;
				await this.getList(true);
				this.freshing = false;
			} catch (e) {
				this.freshing = false;
				console.error(e);
			}
		},
		async getList(isReload) {
			// Boolean 是否下拉刷新
			try {
				this.pageNum += 1;
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize, // 每页显示的条数
				};
				this.loading = true;
				const res = await this.queryList(params);
				this.loading = false;
				const { rows = [] } = res || {};
				const data = isReload ? rows : [...this.value, ...rows];
				this.$emit('change', data);
				this.imageName =
					!rows.length && this.pageNum === 1 ? 'empty' : ''; // 数据为空
				// 没有更多
				this.noMore = rows.length < this.pageSize;
			} catch (e) {
				this.imageName = 'load-fail'; // 数据加载失败
				this.$emit('change', []);
				this.loading = false;
				console.error(e);
			}
		},
		scrolltolower() {
			// 滚动到底部触发
			if (this.noMore) return;
			this.getList();
		},
	},
};
</script>

<style scoped lang="scss">
.c_scroll_paging {
	height: 100%;
	box-sizing: border-box;

	/deep/ .uni-scroll-view {
		position: relative;
		.uni-scroll-view-content {
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.footer {
		display: flex;
		justify-content: center;
		/deep/ .u-divider {
			width: 200px;
			margin: 0;
		}
	}
	.footer-empty-box {
		align-items: center;
		height: 100%;
		background-color: #fff;
		border-radius: $bd-radius;
	}
}
</style>