siyu_app/components/myGuide/myGuide.vue

<template>
	<view class="guide" v-if="showGuide" @touchmove.stop.prevent>
		<view :style="guideStyle" class="guide-box">
			<template v-if="guideInfo&&guideInfo.el">
				<view class="tips guide-step-tips" id="guidetips" :style="tipPosition">
					<!-- tips content -->
					<view class="guide1">
						<view class="guide1-title">
							<image class="qinghe_icon" src="@/static/images/guide/qinghe_icon.png" mode="aspectFill"></image>
							<text>欢迎使用芳华未来APP</text>
						</view>
						<view>{{guideInfo.tips}}</view>
					</view>
					<!-- tips footer -->
					<view class="tool-btn">
						<text @click="skip">跳过({{index+1}}/{{guideList.length}})</text>
						<view class="next" style="" @click="next">{{ guideInfo.next }}</view>
					</view>
					<view class="arrow" :style="arrowTop"></view>
				</view>
			</template>
		
			<view v-else class="tips" id="guidetips" :style="tipPosition" @click="next">
				<slot>
					<view class="guide2">
						<image class="vector" src="@/static/images/guide/Vector.png" mode="aspectFill"></image>
						<image class="Frame2613" src="@/static/images/guide/Frame2613.png" mode="aspectFill"></image>
						<view class="guide2-tips">
							{{guideInfo&&guideInfo.tips}}
						</view>
						<image class="vector vector-bottom" src="@/static/images/guide/Vector.png" mode="aspectFill"></image>
					</view>
				</slot>
			</view>
		</view>
		<!-- 遮罩层，防止点击 -->
		<view class="v-model"  @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></view>
	</view>
	
</template>

<script>
	export default {
		// name: "novice-guidance",
		props: {
			step: {
				type: Object,
				default: () => {
					return {}
				},
			}
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				stepName: 'step', //该提示步骤的名称，用于不在重复展示
				guideList: [{
					el: '',
					tips: '',
					next: '',
					style: '',
				}],
				index: 0, // 当前展示的索引
				showGuide: true, // 是否显示引导
				guideStyle: '', // 默认样式
				arrowTop: '', //步骤提示三角形的定位
				tipPosition: '', //步骤提示的定位
				systemInfo: '', //屏幕宽度高度等信息
				tipWidth: 200 ,//步骤提示默认的宽度，
				startX: 0,
				startY: 0
			}
		},
		computed: {
			guideInfo() {
				return this.guideList[this.index];
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.guideList = this.step.guideList;
				this.stepName = this.step.name;
				const systemInfo = uni.getSystemInfoSync();
				this.systemInfo = systemInfo;
				const guide = uni.getStorageSync(this.stepName);
				if (!guide) {
					this.getDomInfo();
				} else {
					this.showGuide = false;
				}
			},
			// 展示新手提示
			viewTips(data, scrollTop,scrollHeight) {
				if (data) {
					// 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度
					let newWidth = this.systemInfo.windowWidth - 20;
					if (data.width >= newWidth) {
						data.width = newWidth;
					}
					// 如果距离左边为0,自动增加一点左边距
					if (data.left == 0) {
						data.left = 10;
					}
					let domRW = this.systemInfo.windowWidth - data.left;
					let left = 0;
					// 如果dom距离右边没有tips的宽度大的话,就要让tips向左便宜
					if (domRW < this.tipWidth) {
						left = domRW - this.tipWidth - 30;
					}
					const index = this.index;
					// 步骤条展示的高度需要加上屏幕滚动的高度
					data.top += scrollTop;
					// 根据实际情况需要滚动到展示区域
					// uni.pageScrollTo({
					// 	scrollTop: data.top > 88 ? data.top - 100 : 0,
					// 	duration: 100,
					// })
					uni.pageScrollTo({
						scrollTop: data.top > 44 ? data.top - 44 - this.statusBarHeight : 0,
						duration: 100,
					})
					let obj = Object.assign(this.guideList[index], data);
					// 设置三角形高度
					let arrowTop = -6;
					let top = data.height + 20;
					
					//如果dom在屏幕底部的话，重新调整提示框和三角形的定位
					let newHeight = scrollHeight - data.top - data.height
					
					if(this.guideInfo && this.guideInfo.childEl) {
						const query = uni.createSelectorQuery().in(this.$parent);
						query.select(this.guideInfo.childEl).boundingClientRect((child) => {
							top = data.height + child.height + 20;
							newHeight = newHeight - child.height
							uni.createSelectorQuery().in(this).select('#guidetips').boundingClientRect(res => {
								if (newHeight > (res.height + 5)) {
									this.arrowTop = "top:" + arrowTop + 'px;';
									// 设置提示框定位
									this.tipPosition = "top:" + top + 'px;left:' + left + "px;";
								} else {
									this.arrowTop = 'top: auto;bottom: -6px;';
									// 设置提示框定位
									this.tipPosition = 'top: -14px;left:' + left +
										"px;transform: translateY(-100%);";
								}
							}).exec();
							// 重新设置guideList的值
							this.guideList.splice(index, 1, obj);
							this.guideStyle = this.getStyle(child.height);
						}).exec();
					} else {
						this.$nextTick(()=>{
							uni.createSelectorQuery().in(this).select('#guidetips').boundingClientRect(res => {
								if (newHeight > (res.height + 5)) {
									this.arrowTop = "top:" + arrowTop + 'px;';
									// 设置提示框定位
									this.tipPosition = "top:" + top + 'px;left:' + left + "px;";
								} else {
									this.arrowTop = 'top: auto;bottom: -6px;';
									// 设置提示框定位
									this.tipPosition = 'top: -14px;left:' + left +
										"px;transform: translateY(-100%);";
								}
							}).exec();
						})
						// 重新设置guideList的值
						this.guideList.splice(index, 1, obj);
						this.guideStyle = this.getStyle();
					}
				} else {
					this.index += 1;
					this.getDomInfo();
				}
			},

			// 获取步骤提示的主要样式
			getStyle(childHeight) {
				const {
					width,
					height,
					left,
					top,
					style = 'border-radius: 12rpx;margin: 0'
				} = this.guideInfo;
				const relHeight = height + Number(childHeight || 0)
				let newstyle = "width:" + width + "px;";
				newstyle += "height:" + relHeight + "px;";
				newstyle += "left:" + left + "px;";
				newstyle += "top:" + top + "px;";
				newstyle += "box-shadow: rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;";
				newstyle += style;
				return newstyle;
			},
			// 获取dom信息
			getDomInfo() {
				const {
					el
				} = this.guideInfo;
				if(el) {
					const query = uni.createSelectorQuery().in(this.$parent);
					this.$nextTick(()=> {
						query.select(el).boundingClientRect()
						query.selectViewport().scrollOffset()
						var _this = this;
						query.exec(function(res) {
							// console.log('打印dom的元素的信息', res);
							let data = res[0] // #the-id节点的上边界坐标
							let scrollTop = res[1].scrollTop // 显示区域的竖直滚动位置
							_this.viewTips(data, scrollTop,res[1].scrollHeight)
						})
					});
				} else {
					// 没有节点信息
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					})
					this.arrowTop = "display:none";
					// 设置提示框定位
					this.tipPosition = "top:0;left:0;bottom:0;width: 100vw;"
					const index = this.index;
					let obj = Object.assign(this.guideList[index], {
						width: this.systemInfo.windowHeight,
						height: 0,
						left: 0,
						top: 0,
					});
					// 重新设置guideList的值
					this.guideList.splice(index, 1, obj);
					this.guideStyle = this.getStyle();
				}
			},
			// 跳过新手提示
			skip() {
				this.showGuide = false;
				uni.setStorageSync(this.stepName, true);
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			// 下一步
			next() {
				if (this.index === this.guideList.length - 1) {
					this.showGuide = false;
					uni.setStorageSync(this.stepName, true);
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					})
				} else {
					this.index += 1;
					this.getDomInfo();
				}
			},
			onTouchStart(event) {
			      // 记录触摸开始的位置
			      this.startX = event.touches[0].clientX;
			      this.startY = event.touches[0].clientY;
			},
			onTouchMove(event) {
				  // 获取当前触摸的位置
				  // const currentX = event.touches[0].clientX;
				  // const currentY = event.touches[0].clientY;
				  // // 计算滑动的距离
				  // const deltaX = currentX - this.startX;
				  // const deltaY = currentY - this.startY;
			},
			onTouchEnd(event) {
			  // 触摸结束，可以在这里做一些清理工作
			  const deltaX = event.changedTouches[0].clientX;
			  const deltaY = event.changedTouches[0].clientY;
			  // 触发 swipeGuide 方法
			  this.swipeGuide(deltaX, deltaY);
			},
			swipeGuide(deltaX, deltaY) {
			  // console.log(`滑动的距离: deltaX = ${deltaX}, deltaY = ${deltaY}`);
			  if(Math.abs(deltaY)>10){
				  this.next();
			  }
			}
		},
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.guide1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #757575;
		.qinghe_icon {
			width: 48rpx;
			height: 48rpx;
		}
		.guide1-title {
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			@include u-flex(row, flex-end, flex-start);
		}
	}
	.guide2 {
		width: 100%;
		margin-top: 40%;
		@include u-flex(column, center, center);
		.vector {
			width: 51rpx;
			height: 147rpx;
		}
		.Frame2613 {
			width: 112rpx;
			height: 112rpx;
			margin-top: 20rpx;
		}
		.vector-bottom {
			transform: rotate(180deg);
		}
		.guide2-tips {
			padding: 54rpx 44rpx 40rpx 44rpx;
			box-sizing: border-box;
			margin-top: -30rpx;
			margin-bottom: 36rpx;
			border-radius: 24rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #FCAC34, #F9622F);
		}
	}
	.v-model {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}

	.guide {
		z-index: 10001;
		.guide-box {
			position: absolute;
			z-index: 10001;
			// transition: all 0.2s; 
			.arrow {
				width: 28rpx;
				height: 28rpx;
				background: #fff;
				position: absolute;
				top: 0;
				left: 48rpx;
				z-index: 10000;
				transform: rotate(45deg);
			}
			.guide-step-tips {
				width: 424rpx;
				padding: 0 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				background-color: #fff;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #757575;
				position: relative;
			}
			.tips {
				position: absolute;
				top: 152rpx;
				left: -50%;
				z-index: 10001;

				.text {}

				.tool-btn {
					margin-top: 20rpx;
					@include u-flex(row, center, space-between);
					font-weight: 400;
					font-size: 26rpx;
					color: #757575;
					.next {
						width: 128rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						background: #FF5C03;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

</style>