sadjv3_user/uni_modules/cc-pullScroolView/components/cc-pullScroolView/cc-pullScroolView.vue

<template>
	<view class="ccPullScroll" :class="customClass" :style="{height}">

		<!-- 欢迎关注“前端组件开发”公众号 -->
		<scroll-view :id="scrollId" class="ccPullScrollview" :scroll-top="scrollTop" :scroll-with-animation="false"
			:scroll-y="scrollAble" :enable-back-to-top="true" @scroll="scroll" @touchstart="touchstart"
			@touchmove="touchmove" @touchend="touchend" :lower-threshold="upOffset" @touchcancel="touchend">
			<view :style="{'transform': translateY, 'transition': transition}">
				<view class="cc-pull-down-wrap"
					:class="[{'is-success': isShowDownTip && isDownSuccess},{'is-error': isShowDownTip && isDownError}]"
					:style="{'height':downOffset+'rpx'}">
					<view class="cc-pull-loading-icon" v-if="!isShowDownTip"
						:class="{'cc-pull-loading-rotate':isDownLoading}" :style="{'transform':downRotate}"></view>
					<view>{{downText}}</view>
				</view>

				<slot></slot>

				<slot name="empty" v-if="isEmpty"></slot>

				<view class="cc-pull-up-wrap">
					<slot name="up-loading" v-if="isUpLoading">
						<view class="cc-pull-loading-icon cc-pull-loading-rotate"></view>
						<view>{{upLoadingText}}</view>
					</slot>
					<slot name="up-error" v-if="isUpError && showUpError">
						<view v-if="upErrorText" @click="onUpErrorClick">{{upErrorText}}</view>
					</slot>
					<slot name="up-finish" v-else-if="isUpFinish && showUpFinish">
						<view v-if="upFinishText">{{upFinishText}}</view>
					</slot>
				</view>
			</view>
		</scroll-view>
		<!-- 回到顶部按钮 -->
		<view class="cc-pull-back-top" v-if="backTop" :class="{'is-show':isShowBackTop}" @click="onBackTop">
			<slot name="backtop">
				<image class="default-back-top" :src="defaultBackTopImgSrc" mode="aspectFill" />
			</slot>
		</view>
	</view>
</template>

<script>
	// #ifndef VUE3
	const defaultBackTopImgSrc = require('./back-top.png');
	// #endif

	// #ifdef VUE3
	// const defaultBackTopImgSrc = new URL('./back-top.png', import.meta.url).href;
	// 适配小程序
	import defaultBackTopImgSrc from './back-top.png';
	// #endif

	export default {
		name: 'ccPullScroll',
		data() {
			Object.assign(this, {
				pullType: '',
				scrollRealTop: 0, // 滚动条的位置
				scrollHeight: 0,
				page: 1,
				startPoint: null,
				lastPoint: null,
				startTop: 0,
				inTouchend: false,
				movetype: 0,
				startAngle: 0,
				isMoveDown: false
			});
			return {
				scrollId: 'ccPullScrollview-id-' + Math.random().toString(36).substr(2), // 随机生成mescroll的id(不能数字开头,否则找不到元素)
				defaultBackTopImgSrc,
				downHight: 0, // 下拉刷新: 容器高度
				downRotate: 0, // 下拉刷新: 圆形进度条旋转的角度
				downText: '', // 下拉刷新: 提示的文本
				isEmpty: false, // 是否显示空布局
				isShowDownTip: false, // 下拉刷新提示结果
				isDownSuccess: false, // 下拉刷新成功
				isDownError: false, // 下拉刷新失败
				isDownReset: false, // 下拉刷新: 是否显示重置的过渡动画
				isDownLoading: false, // 下拉刷新: 是否显示加载中
				isUpLoading: false, // 上拉加载: 是否显示 "加载中..."
				isUpFinish: false, // 是否加载完毕
				isUpError: false, // 是否上拉加载出错
				isShowBackTop: false, // 是否显示回到顶部按钮
				scrollAble: true, // 是否禁止下滑 (下拉时禁止,避免抖动)
				scrollTop: 0 // 滚动条的位置
			};
		},
		props: {
			// class
			customClass: {
				type: String,
				default: ''
			},
			// 设置高度，默认继承父级高度
			height: {
				default: '100%'
			},
			// 下拉时文案
			pullingText: {
				type: String,
				default: '下拉刷新'
			},
			// 下拉释放时文案
			loosingText: {
				type: String,
				default: '释放刷新'
			},
			// 下拉释放后文案
			downLoadingText: {
				type: String,
				default: '正在刷新 ...'
			},
			// 上拉加载时文案
			upLoadingText: {
				type: String,
				default: '加载中 ...'
			},
			// 是否显示下拉刷新成功
			showDownSuccess: {
				type: Boolean,
				default: false
			},
			// 下拉刷新成功文案
			downSuccessText: {
				type: String,
				default: '刷新成功'
			},
			// 是否显示下拉刷新失败
			showDownError: {
				type: Boolean,
				default: false
			},
			// 下拉刷新失败文案
			downErrorText: {
				type: String,
				default: '刷新失败'
			},
			// 是否显示上拉加载时失败
			showUpError: {
				type: Boolean,
				default: true
			},
			// 上拉加载失败文案
			upErrorText: {
				type: String,
				default: '加载失败，点击重新加载'
			},
			// 是否显示上拉加载数据全部完成
			showUpFinish: {
				type: Boolean,
				default: true
			},
			// 上拉加载完毕文案
			upFinishText: {
				type: String,
				default: '暂无更多了'
			},
			// 下拉配置
			// 下拉回掉，参数为vm
			pullDown: Function,
			// 是否允许下拉刷新
			enablePullDown: {
				type: Boolean,
				default: true
			},
			downOffset: {
				type: Number,
				default: 100
			},
			downMinAngle: {
				type: Number,
				default: 45
			},
			downInOffsetRate: {
				type: Number,
				default: 1
			},
			downOutOffsetRate: {
				type: Number,
				default: 0.2
			},
			downStartTop: {
				type: Number,
				default: 100
			},
			// 下拉释放失效高度
			downTouchHeight: {
				type: Number,
				default: 1200
			},


			upOffset: {
				type: Number,
				default: 100
			},
			// 回到顶部
			backTop: Boolean,
			// 滚动距离大于多少rpx时触发
			backTopOffset: {
				type: Number,
				default: 1000
			}
		},
		computed: {
			numBackTopOffset() {
				return uni.upx2px(this.backTopOffset);
			},
			numDownStartTop() {
				return uni.upx2px(this.downStartTop);
			},
			numDownOffset() {
				return uni.upx2px(this.downOffset);
			},
			numDownTouchHeight() {
				return uni.upx2px(this.downTouchHeight);
			},
			transition() {
				return this.isDownReset ? 'transform 300ms' : '';
			},
			translateY() {
				return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : '';
			}
		},
		methods: {
			// 注册列表滚动事件,用于下拉刷新
			scroll(e) {
				e = e.detail;
				// 更新滚动条的位置
				this.scrollRealTop = e.scrollTop;
				// 更新滚动内容高度
				this.scrollHeight = e.scrollHeight;
				// 回到顶部功能
				if (this.backTop) {
					// 返回顶部按钮的显示隐藏
					if (e.scrollTop >= this.numBackTopOffset) {
						this.isShowBackTop = true;
					} else {
						this.isShowBackTop = false;
					}
				}
			},
			// 注册列表touchstart事件,用于下拉刷新
			touchstart(e) {
				if (!this.pullDown || !this.enablePullDown) return;
				this.startPoint = this.getPoint(e); // 记录起点
				this.startTop = this.scrollRealTop; // 记录此时的滚动条位置
				this.startAngle = 0; // 初始角度
				this.lastPoint = this.startPoint; // 重置上次move的点
				this.inTouchend = false; // 标记不是touchend
			},
			// 注册列表touchmove事件,用于下拉刷新
			touchmove(e) {
				if (!this.pullDown || !this.enablePullDown) return;

				const scrollTop = this.scrollRealTop; // 当前滚动条的距离
				const curPoint = this.getPoint(e); // 当前点

				const moveY = curPoint.y - this.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉

				// (向下拉&&在顶部) scroll-view在滚动时不会触发touchmove,当触顶/底/左/右时,才会触发touchmove
				// scroll-view滚动到顶部时,scrollTop不一定为0; 在iOS的APP中scrollTop可能为负数,不一定和startTop相等
				if (moveY > 0 && (scrollTop <= 0 || (scrollTop <= this.numDownStartTop && scrollTop === this.startTop))) {
					// 可下拉的条件
					if (this.pullDown && this.enablePullDown && !this.inTouchend && !this.isDownLoading && !this
						.isUpLoading) {
						// 下拉的初始角度是否在配置的范围内
						if (!this.startAngle) this.startAngle = this.getAngle(this.lastPoint,
							curPoint); // 两点之间的角度,区间 [0,90]
						if (this.startAngle < this.downMinAngle) return; // 如果小于配置的角度,则不往下执行下拉刷新

						// 如果手指的位置超过配置的距离,则提前结束下拉,避免Webview嵌套导致touchend无法触发
						if (this.numDownTouchHeight > 0 && curPoint.y >= this.numDownTouchHeight) {
							this.inTouchend = true; // 标记执行touchend
							this.touchend(); // 提前触发touchend
							return;
						}

						this.preventDefault(e); // 阻止默认事件

						const diff = curPoint.y - this.lastPoint.y; // 和上次比,移动的距离 (大于0向下,小于0向上)

						// 下拉距离  < 指定距离
						if (this.downHight < this.numDownOffset) {
							if (this.movetype !== 1) {
								this.movetype = 1; // 加入标记,保证只执行一次
								// 下拉的距离进入offset范围内那一刻的回调
								this.scrollAble = false; // 禁止下拉,避免抖动
								this.isDownReset = false; // 不重置高度
								this.isDownLoading = false; // 不显示加载中
								this.downText = this.pullingText; // 设置文本
								this.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
							}
							this.downHight += diff * this.downInOffsetRate; // 越往下,高度变化越小
							// 指定距离  <= 下拉距离
						} else {
							if (this.movetype !== 2) {
								this.movetype = 2; // 加入标记,保证只执行一次
								// 下拉的距离大于offset那一刻的回调
								this.scrollAble = false; // 禁止下拉,避免抖动
								this.isDownReset = false; // 不重置高度
								this.isDownLoading = false; // 不显示加载中
								this.downText = this.loosingText; // 设置文本
								this.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
							}
							if (diff > 0) { // 向下拉
								this.downHight += Math.round(diff * this.downOutOffsetRate); // 越往下,高度变化越小
							} else { // 向上收
								this.downHight += diff; // 向上收回高度,则向上滑多少收多少高度
							}
						}
						// 设置旋转角度
						this.downRotate = 'rotate(' + 360 * (this.downHight / this.numDownOffset) + 'deg)';
					}
				}
				// 记录本次移动的点
				this.lastPoint = curPoint;
			},
			// 注册列表touchend事件,用于下拉刷新
			touchend(e) {
				if (!this.pullDown || !this.enablePullDown) return;
				// 如果下拉区域高度已改变,则需重置回来
				if (this.isMoveDown) {
					if (this.downHight >= this.numDownOffset) {
						// 符合触发刷新的条件
						this.triggerPullDown();
					} else {
						// 不符合的话 则重置
						this.downHight = 0;
						this.scrollAble = true; // 开启下拉
						this.isDownReset = true; // 重置高度
						this.isDownLoading = false; // 不显示加载中
						this.scrollTo(0);
					}
					this.movetype = 0;
					this.isMoveDown = false;
				}
			},
			/* 计算两点之间的角度: 区间 [0,90] */
			getAngle(p1, p2) {
				const x = Math.abs(p1.x - p2.x);
				const y = Math.abs(p1.y - p2.y);
				const z = Math.sqrt(x * x + y * y);
				let angle = 0;
				if (z !== 0) {
					angle = Math.asin(y / z) / Math.PI * 180;
				}
				return angle;
			},
			preventDefault(e) {
				// 小程序不支持e.preventDefault
				// app的bounce只能通过配置pages.json的style.app-plus.bounce为"none"来禁止
				// cancelable:是否可以被禁用; defaultPrevented:是否已经被禁用
				if (e && e.cancelable && !e.defaultPrevented) e.preventDefault();
			},
			// 点击回到顶部的按钮回调
			onBackTop() {
				this.isShowBackTop = false; // 回到顶部按钮需要先隐藏,再执行回到顶部,避免闪动
				this.scrollTo(0); // 执行回到顶部
			},
			// 点击失败重新加载
			onUpErrorClick() {
				this.isUpError = false;
				this.triggerPullDown();
			},
			scrollTo(y) {
				this.scrollTop = this.scrollRealTop;
				this.$nextTick(() => {
					this.scrollTop = y;
				});
			},
			/* 根据点击滑动事件获取第一个手指的坐标 */
			getPoint(e) {
				if (!e) {
					return {
						x: 0,
						y: 0
					};
				}
				if (e.touches && e.touches[0]) {
					return {
						x: e.touches[0].pageX,
						y: e.touches[0].pageY
					};
				} else if (e.changedTouches && e.changedTouches[0]) {
					return {
						x: e.changedTouches[0].pageX,
						y: e.changedTouches[0].pageY
					};
				} else {
					return {
						x: e.clientX,
						y: e.clientY
					};
				}
			},
			/* 显示上拉加载中 */
			showUpLoading() {
				this.isEmpty = false;
				this.isUpError = false;
				this.isUpFinish = false;
				this.isUpLoading = true;
			},
			/* 显示下拉进度布局 */
			showDownLoading() {
				this.isEmpty = false;
				this.isUpLoading = false;
				this.isUpError = false;
				this.isUpFinish = false;

				this.isShowDownTip = false;
				this.isDownSuccess = false;
				this.isDownError = false;
				this.isDownLoading = true; // 显示加载中
				this.downHight = this.numDownOffset; // 更新下拉区域高度
				this.scrollAble = true; // 开启下拉
				this.isDownReset = true; // 重置高度
				this.downText = this.downLoadingText; // 设置文本
			},
			/* 结束下拉刷新 */
			hideDownLoading() {
				if (this.isDownLoading) {
					if (this.isDownSuccess && this.showDownSuccess) {
						this.downText = this.downSuccessText;
						this.isShowDownTip = true;
					} else if (this.isDownError && this.showDownError) {
						this.downText = this.downErrorText;
						this.isShowDownTip = true;
					}
					if (this.isShowDownTip) {
						setTimeout(() => {
							this.downHight = 0;
							this.isDownReset = true; // 重置高度
							this.scrollHeight = 0; // 重置滚动区域,使数据不满屏时仍可检查触发翻页
							setTimeout(() => {
								this.scrollAble = true; // 开启下拉
								this.isDownLoading = false; // 不显示加载中
								this.isShowDownTip = false;
							}, 300);
						}, 1000);
					} else {
						this.downHight = 0;
						this.isDownReset = true; // 重置高度
						this.scrollHeight = 0; // 重置滚动区域,使数据不满屏时仍可检查触发翻页
						this.scrollAble = true; // 开启下拉
						this.isDownLoading = false; // 不显示加载中
						this.isShowDownTip = false;
					}
				}
			},
			/* 显示上拉加载中 */
			showUpLoading() {
				this.isEmpty = false;
				this.isUpError = false;
				this.isUpFinish = false;
				this.isUpLoading = true;
			},
			/* 结束上拉加载 */
			hideUpLoading() {
				if (this.isUpLoading) {
					this.$nextTick(() => {
						this.isUpLoading = false;
					});
				}
			},
			/* 触发下拉刷新 */
			triggerPullDown() {
				if (this.pullDown && this.enablePullDown && !this.isDownLoading && !this.isUpLoading) {
					// 下拉加载中...
					this.showDownLoading(); // 下拉刷新中...
					this.page = 1; // 预先加一页
					this.pullType = 'down';
					this.pullDown && this.pullDown.call(this.$parent, this);
				}
			},

			refresh() {
				this.scrollTo(0);
				this.page = 1;
				this.isEmpty = false;
				this.isDownSuccess = false;
				this.isDownError = false;
				this.isShowDownTip = false;
				this.isUpError = false;
				this.isUpFinish = false;
				this.isDownLoading = false;
				this.isUpLoading = false;
				if (this.pullDown && this.enablePullDown) {
					this.triggerPullDown();
				}
			},
			/* 正常加载成功 */
			success() {
				this.page++;
				if (this.isDownLoading) {
					this.isDownSuccess = true;
				}
				this.hideDownLoading();
				this.hideUpLoading();
			},
			/* 加载失败 */
			error() {
				if (this.isDownLoading) {
					this.isDownError = true;
				} else if (this.isUpLoading) {
					this.isUpError = true;
				}
				this.hideDownLoading();
				this.hideUpLoading();
			},
			/* 没有数据 */
			empty() {
				if (this.isDownLoading) {
					this.isDownSuccess = true;
				}
				this.isEmpty = true;
				this.isUpFinish = true;
				this.hideDownLoading();
				this.hideUpLoading();
			},
			/* 全部数据加载完毕 */
			finish() {
				this.hideDownLoading();
				this.hideUpLoading();
				this.isUpFinish = true;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ccPullScroll {
		height: 100%;
		position: relative;

		.ccPullScrollview {
			position: relative;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			box-sizing: border-box;
		}

		/* 定位的方式固定高度 */
		.is-fixed {
			z-index: 1;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: auto;
			height: auto;
		}

		.cc-pull-down-wrap,
		.cc-pull-up-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: gray;
		}

		.cc-pull-down-wrap {
			position: absolute;
			left: 0;
			width: 100%;
			transform: translateY(-100%);
		}

		.cc-pull-up-wrap {
			min-height: 100rpx;
		}

		/* 旋转loading */
		.cc-pull-loading-icon {
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			margin-right: 16rpx;
			border: 2rpx solid currentColor;
			border-bottom-color: transparent !important;
		}

		/* 旋转动画 */
		.cc-pull-loading-rotate {
			animation: cc-pull-loading-rotate 0.6s linear infinite;
		}

		@keyframes cc-pull-loading-rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		/* 回到顶部的按钮 */
		.cc-pull-back-top {
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.3s linear;

			&.is-show {
				opacity: 1;
				pointer-events: auto;
			}

			.default-back-top {
				position: absolute;
				right: 20rpx;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				bottom: 30rpx;
				z-index: 99;
			}
		}
	}
</style>