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">
			<view class="lsv-list">
				<slot name="list" :data="dataList" :is-scrolling="isScrolling"></slot>
				<!-- 始终显示的底部提示 -->
				<view class="lsv-footer">
					{{ hasMoreData ? '上拉加载更多' : '-- 暂无更多数据 --' }}
				</view>
			</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: [],
			// 是否有更多数据
			hasMoreData: true,
			// 下拉刷新的配置
			downOption: {
				
			},
			// 是否滚动
			isScrolling: false,
      		scrollTimer: null
		};
	},
	computed: {
		// 上拉加载的配置
		upOption() {
			let obj = {
				// noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于5条才显示无更多数据;
				onScroll: true,
				textLoading: '上拉加载更多...',
				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.hasMoreData = true; // 下拉刷新时重置为有更多数据
			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: r,
							total: r.length
						};
					}
					let result = r || {}, records = r[this.keyName] || [];
					this.$emit('afterFetch', result);
					// 数据
					this.dataList = this.dataList.concat(records);
					// 判断是否还有更多数据
					this.hasMoreData = this.dataList.length < (result.total || result[this.keyName].total);
					this.mescroll.endBySize(records.length, result.total || result[this.keyName].total);
				} else {
					this.$tip.error('数据请求发生错误');
					this.mescroll.endErr();
				}
			}).catch(e => {
				this.mescroll.endErr();
			});
		},
		reloadList(p) {
			this.params = p;
			this.hasMoreData = true; // 重新加载时重置为有更多数据
			this.mescroll.resetUpScroll();
		}
	}
}
</script>

<style lang="scss" scoped>
.lsv-container {
	height: 100%;
	position: relative;
	.lsv-list {
		min-height: 100%;
		.lsv-footer {
			text-align: center;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #999;
			border-top: 1rpx solid #f7f8fc;
		}
	}
}
</style>