LocalLivingServicesUniapp/components/list-scroll-view/index.vue

<template>
	<view class="lsv-container">
		<mescroll-uni 
			ref="mescrollRef"
			:fixed="false"
			:up="upOption" 
			:down="downOption" 
			@up="upCallback"
			@down="downCallback"
			@init="mescrollInit"
			@scroll="onScroll"
			@emptyclick="onEmptyClick">
			<view class="lsv-list">
				<slot name="list" :data="dataList" :is-scrolling="isScrolling"></slot>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
export default {
	name: '',
	props: {
		// 数据接口
		api: {
			type: Object,
			required: true,
			default: null
		},
		// 初始参数
		init: {
			type: Object,
			default: () => ({})
		},
		emptyText: {
			type: String,
			default: ''
		},
		emptyBtnText: {
			type: String,
			default: ''
		},
		// 自定义list数据的字段
		keyName: {
			type: String,
			default: 'records'
		},
		// page相关
		noPage: {
			type: Boolean,
			default: false
		},
		pageSize: {
			type: [Number, String],
			default: 10
		},
	},
	data() {
		return {
			params: {},
			dataList: [],
			// 下拉刷新的配置
			downOption: {
				
			},
			// 是否滚动
			isScrolling: false,
      		scrollTimer: null
		};
	},
	computed: {
		// 上拉加载的配置
		upOption() {
			let obj = {
				// noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于5条才显示无更多数据;
				onScroll: true,
				textNoMore: '-- 暂无更多数据 --', 
				page: {
					size: this.pageSize // 每页数据的数量,默认10
				},
				empty: {
					use: true,
					tip: this.emptyText || '暂无数据',
					btnText: this.emptyBtnText,
					// icon: '/static/common/empty.png',
				}
			};
			return obj;
		}
	},
	methods: {
		// scroll
		mescrollInit(e) {
			this.mescroll = e;
		},
		onScroll(e) {
			this.isScrolling = true;
      
			// 使用防抖判断滚动结束
			clearTimeout(this.scrollTimer);
			this.scrollTimer = setTimeout(() => {
				this.isScrolling = false;
			}, 200);
		},
		// 下拉刷新
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		// 上拉加载
		upCallback(e) {
			if (!this.api) {
				this.mescroll.endErr();
				return;
			}
			let options = {}, params = {
				pageNo: e.num,
				pageSize: e.size,
				...this.init,
				...this.params
			};
			// request底层问题
			if (this.api.method === 'POST') {
				options.data = params;
			} else if (this.api.method === 'GET') {
				options.params = params;
			}
			// 置空
			if(e.num == 1) this.dataList = []; 
			// 请求
			this.$http.request({
				...this.api,
				...options
			}).then(res => {
				if (res.data.code === 200) {
					let r = res.data.result;
					// 无分页处理，用于那些需要下拉和空列表的地方
					if (this.noPage) {
						r = {
							records: Array.isArray(r) ? r : [],
							total: Array.isArray(r) ? r.length : 0
						};
					}
					let result = r || {};
					let records = [];
					let total = 0;
					// 标准分页：{ records, total }
					if (Array.isArray(result[this.keyName])) {
						records = result[this.keyName];
						total = result.total;
					}
					// 嵌套分页：{ page: { records, total }, summary? }
					else if (result.page && Array.isArray(result.page.records)) {
						records = result.page.records;
						total = result.page.total;
					}
					this.$emit('afterFetch', result);
					// 数据
					this.dataList = this.dataList.concat(records);
					this.mescroll.endBySize(records.length, total || 0);
				} else {
					this.$tip.error(res.data.message || '数据请求发生错误');
					this.mescroll.endErr();
				}
			}).catch(e => {
				this.mescroll.endErr();
			});
		},
		reloadList(p) {
			this.params = p || this.params;
			if (this.mescroll) this.mescroll.resetUpScroll();
		},
		onEmptyClick() {
			this.$emit('emptyclick');
		}
	}
}
</script>

<style lang="scss" scoped>
.lsv-container {
	height: 100%;
	position: relative;
	.lsv-list {
		min-height: 100%;
	}
}
</style>