unipp vue3版本如何封装一个请求加载更多loading组件

我们在开发app的时候几乎每个app页面都有列表，获取详情，上拉加载更多；能不能把这几种情况封装成一个组件呢，包括错误信息显示，loading等。

新建一个fetch.vue组件粘贴如下代码：

<template>
	<view class="ky-fetch-wrap">

		<view v-show="loadState === 1" class="ky-fetch-content">
			<slot v-if="isLoadmore" :list="list" name="default"></slot>
			<slot v-else :data="data" name="default"></slot>
			<view v-if="loadState === 1 && isLoadmore" class="ky-fetch-more-nodata" @click="reload">
				<text class="ky-fetch-more-tips">{{ tips }}</text>
				<image v-if="!noMore && !loadError" class="ky-fetch-more-loading" src="/static/img/load.gif"></image>
			</view>
		</view>

		<view v-if="loadState === 0 || !loadState" :class="{ isRelative }" class="ky-fetch-loading">
			<loading v-if="!$slots.loading"></loading>
			<slot name="loading"></slot>
		</view>

		<view v-if="loadState !== 0 && loadState !== 1" class="ky-fetch-error">

			<view v-if="!$slots.nodata || !$slots.error" class="ky-fetch-error-tip" @click="reload">
				<template v-if="!noIcon">
					<image v-if="loadState === -1" class="ky-fetch-err-img" src="@/static/img/nodata.png"></image>
					<image v-else-if="loadState === -2" class="ky-fetch-err-img" src="@/static/img/request_error.png">
					</image>
					<image v-else class="ky-fetch-err-img" src="@/static/img/network_error.png"></image>
				</template>
				<text
					class="ky-fetch-err-txt">{{ msg || noDataMsg || (loadState === -1 ? '暂无相关内容' : '加载失败，请点击重试') }}</text>
			</view>

			<view v-if="$slots.nodata && loadState === -1" class="ky-fetch-error-tip">
				<slot name="nodata"></slot>
			</view>

			<view v-if="$slots.error && loadState === -2" class="ky-fetch-error-tip">
				<slot name="error"></slot>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 是否加载列表
			isLoadmore: {
				type: Boolean,
				default: false
			},
			// api地址
			api: {
				type: String,
				default: '',
				required: true,
			},
			// status 1：请求成功, -1：暂无数据, -2：请求失败， -3: 无网络
			status: {
				type: Number,
				default: 0
			},
			// 筛选条件
			condition: {
				type: Object,
				default: () => {}
			},
			// 不主动执行请求
			manual: {
				type: Boolean,
				default: false
			},
			// 是否相对定位
			isRelative: {
				type: Boolean,
				default: false,
			},
			// 是否请求完成就隐藏loading
			autoHideLoading: {
				type: Boolean,
				default: true
			},
			// 是否返回合并后的数据
			concat: {
				type: Boolean,
				default: true
			},
			noDataMsg: {
				type: String,
				default: '',
			},
			errMsg: {
				type: String,
				default: '',
			},
			// 无内容或者错误时不显示图标
			noIcon: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				noMore: false,
				loadState: 0,
				filter: {
					page: 1,
					size: 10
				},
				data: {},
				list: [],
				tips: '没有更多了',
				loadError: false,
				loading: false,
				isChangeCondition: false,
				msg: '',
			}
		},
		watch: {
			status(v) {
				this.loadState = v
			},
		},
		mounted() {
			if (!this.manual) {
				this.init()
			}
			this.msg = this.errMsg
			this.loadState = this.status
			this.setFilters(this.condition)
		},
		methods: {
			async init() {
				this.filter.page = 1
				this.list = []
				return await this.getList()
			},
			// 为了条件查询后使用的, noReload是否设置loadState为1
			refresh(noReload) {
				this.filter.page = 1
				this.list = []
				// 不延迟的话，condition里面的东西拿不到
				setTimeout(() => {
					this.getList(noReload)
				})
			},
			reload() {
				if (this.loading || this.noMore) {
					return
				}
				this.loading = false
				this.getList()
			},
			hideLoading() {
				this.loadState = 1
			},
			setErrMsg(msg) {
				this.msg = msg
				this.loadState = -2
			},
			setFilters(data = {}) {
				const obj = {
					...this.filter,
					...data,
				}
				for (let a in obj) {
					if (!obj[a] && typeof obj[a] !== 'number') {
						delete obj[a]
					}
				}
				this.filter = obj
			},
			async getList(noReload) {
				this.loading = true
				this.setFilters(this.condition)

				let rows = []
				const params = this.filter
				const {
					page,
					size
				} = params

				if (page === 1 && !noReload) {
					this.loadState = 0
				}

				if (params.requestApi) {
					params.requestBodyDic.page = page
					params.requestBodyDic.size = size
					delete params.page
					delete params.size
				}

				try {
					const apiUrl = this.api.split('.')
					const res = await this.$api[apiUrl[0]][apiUrl[1]](params)
					const {
						data,
						lists,
						list,
						count
					} = res

					if (!this.isLoadmore) {
						this.data = data || res
						this.loadState = 1
						return this.data
					}

					if (!data) {
						rows = lists || list || []
					} else {
						rows = Array.isArray(data) ? data : data.lists
					}

					const newList = rows
					const isNoData = !newList.length && page === 1

					this.list = this.concat ? [...this.list, ...newList] : newList

					this.noMore = newList.length < size

					if (data && data.count) {
						this.noMore = this.list.length >= data.count
					}

					if (count) {
						this.noMore = this.list.length >= count
					}

					this.tips = this.noMore ? '没有更多了' : '加载中...'

					if (this.autoHideLoading) {
						this.loadState = isNoData ? -1 : 1
					}

					this.loadError = false
					this.$emit('load', this.list)

					if (page === 1 && data) {
						const obj = {
							...data
						}
						delete obj.lists
						this.$emit('all', obj)
					}

				} catch (e) {
					if (page === 1) {
						this.loadState = -2
					}
					if (e.code === 504) {
						this.loadState = -3
					}
					this.tips = e.msg || '加载失败，请点击重试'
					this.msg = this.tips
					this.loadError = true
					this.$emit('error', e)
					return Promise.reject(e)
				} finally {
					this.loading = false
				}
			},
			loadMore() {
				if (this.noMore) {
					return
				}
				if (this.loading) {
					return
				}
				if (this.loadError) {
					return
				}
				this.filter.page++
				this.getList()
			}
		},
	}
</script>

<style scoped lang="scss">
	.ky-fetch-more-nodata {
		text-align: center;
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.ky-fetch-more-tips {
			font-size: 24rpx;
			color: var(--color-gray);
		}

		.ky-fetch-more-loading {
			width: 40rpx;
			height: 40rpx;
			display: inline-block;
			margin-left: 12rpx;
		}
	}

	.ky-fetch-loading {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 0;
		padding: 24rpx;

		&.isRelative {
			position: relative;
			min-height: 100rpx;
		}
	}

	.ky-fetch-error {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 0;
		padding: 24rpx;

		.ky-fetch-error-tip {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.ky-fetch-err-img {
			width: 500rpx;
			height: 333rpx;
		}

		.ky-fetch-err-txt {
			font-size: 24rpx;
			color: var(--color-gray);
		}
	}
</style>

 

参数api我这里是通过访问下标的方式进行访问，你们自己的话可以换成自己封装的请求或者直接传接口地址

 

使用方式：

<fetch :condition="condition" isLoadmore ref="list" api="user.RequestForwarding">
	<template v-slot:default="{ list }">
		<view class="pa-list m-24">
			<view v-for="(item, index) in list" :key="index" class="pa-item card p-24">
				测试123
			</view>
		</view>
	</template>
</fetch>

 

上拉加载直接调用this.$refs.list.loadMore()

刷新调用this.$refs.list.refresh()

loading.vue:

<template>
	<view :class="{ isRelative }" class="ky-loading-box loading5">
		<view class="shape shape1"></view>
		<view class="shape shape2"></view>
		<view class="shape shape3"></view>
	</view>
</template>

<script>
	export default {
		props: {
			isRelative: {
				type: Boolean,
				default: false,
			}
		}
	}
</script>

<style scoped lang="scss">
	.ky-loading-box {
		height: 25rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 0;
		&.isRelative {
			position: relative;
			min-height: 100rpx;
		}
	}
	.shape {
	  width: 25rpx;
	  height: 25rpx;
	  border-radius: 50%;
	  background-color: var(--color-primary);
		margin: 0 6rpx;
	}
	.shape1 {
	  animation: pulse .4s ease 0s infinite alternate;
	}
	.shape2 {
	  animation: pulse .4s ease .2s infinite alternate;
	}
	.shape3 {
	  animation: pulse .4s ease .4s infinite alternate;
	}
	@keyframes pulse {
	  from {
	    opacity: 1;
	    transform: scale(1);
	  }
	  to {
	    opacity: .25;
	    transform: scale(.5);
	  }
	}
</style>

 

效果：