基于原作者的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,请点击:这里