uniapp制作新手(新用户)引导提示

基于原作者的demo进行修改些许的bug

vue版本：2.x

修复内容：

1、如果需要引导的dom在底部并且底部的，重新调整提示框和三角形的定位

//判断dom的位置是不是在屏幕底部
let newHeight = this.systemInfo.windowHeight - data.bottom;
//获取tip提示框的大小
uni.createSelectorQuery().in(this.$root).select('.tips').boundingClientRect(res => {
	//如果dom的位置与底部的位置不够tip提示框的摆放，就重新调整tip提示框的位置，否之还继续在dom底部摆放
	if (newHeight > (res.height + 5)) {
		//三角形的定位
		this.arrowTop = "top:" + arrowTop + 'px;';
		// 设置提示框定位
		this.tipPosition = "top:" + (arrowTop + 5) + 'px;left:' + left +
			"px;background: linear-gradient(180deg, #1cbbb4, #0081ff);";
	} else {
		//三角形的定位
		this.arrowTop = 'top: -19px;';
		// 设置提示框定位
		this.tipPosition = 'top: -14px;left:' + left + "px;transform: translateY(-100%);background: linear-gradient(0deg, #1cbbb4, #0081ff);";
	}
}).exec();

2、新手引导完成后scrollTop顶部

	skip() {
		this.showGuide = false;
		uni.setStorageSync(this.stepName, 'true');
		//在完成新手引导后需要滚动到屏幕顶部，恢复页面的滚动位置
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		})
	},

3、把提示框的next和style抽离出来，可以动态设置以及增加默认值

<view class="next" style="" @click="next">{{ guideInfo.next }}</view>

getStyle() {
	const {
		width,
		height,
		left,
		top,
		style = 'border-radius: 8rpx;margin: 0'  //style增加默认样式
	} = this.guideInfo;
	let newstyle = "width:" + width + "px;";
	newstyle += "height:" + height + "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;
},

4、修复组件防止滑动穿透的效果

<!--  在根view节点上写上@touchmove.stop.prevent，防止滑动穿透  -->
<template>
	<view class="guide" v-if="showGuide" @touchmove.stop.prevent>
	...
	</view>
</template>

最后附上原作者的demo地址，感谢原作者的付出
链接: https://ext.dcloud.net.cn/plugin?id=6653
下载修改后的demo，请点击:这里