uni-app制作新手引导
新手引导一般用于新用户打开APP,引导用户使用的流程
实现思路,以uni-app为例,也是基于vue实现
1. 获取需要高亮元素的宽高以及left, top 使用 boundingClientRect 方法
2. 使用box-shadow 将其它区域遮盖住即可
具体步骤:
一、封装我们需要的数据
data () { return { guideList: [{ el: '.head-portrait .avge', // 需要高亮的元素,这里最好唯一 tips: '点击这里,加入神奇的左汪右喵世界', // 提示文字 next: '下一步', // 下一步按钮显示文字 style: { // 高亮样式 borderRadius: '12rpx', margin: '-10rpx 0 0 -10rpx' }, tipStyle: { // tips样式 left: '-200rpx' } }, { el: '.navList .nav-image-1-1', tips: '点击这里,快速记录小可爱成长的点点滴滴', next: '下一步', style: { borderRadius: '12rpx', margin: '-10rpx 0 0 -32rpx' }, tipStyle: { left: '-164rpx' } }, { el: '.navList .nav-image-2-3', tips: '点击这里,是小可爱的智能硬件仓库', next: '下一步', style: { borderRadius: '12rpx', margin: '-10rpx 0 0 -32rpx' }, tipStyle: { left: '-356rpx' } }], index: 0, // 当前展示的索引 showGuide: true, // 是否显示引导 } },
二、 展示布局
<view class="guide" @touchmove.stop.prevent="moveHandle" v-if="showGuide"> <view :style="getStyle" class="guide-box" catchtouchmove="true"> <view class="tips" :style="{left: guideInfo.tipStyle.left}"> <view class="text">{{ guideInfo.tips }}</view> <view class="next"> <text @click="next">{{ guideInfo.next }}</text> </view> </view> <view class="arrow"></view> </view> </view>
三、计算当前展示的数据
computed: { guideInfo() { return this.guideList[this.index]; }, getStyle () { const { width, height, left, top, style } = this.guideInfo; return { width: 120 + 'rpx', height: 120 + 'rpx', left: left + 'px', top: top + 'px', ...style, boxShadow: 'rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px' } } },
四、方法处理
mounted() { const guide = uni.getStorageSync('guide_key'); if (!guide) { this.getDomInfo(); } else { this.showGuide = false; } }, methods: { getDomInfo () { const { el } = this.guideInfo; const query = uni.createSelectorQuery().in(this.$root); setTimeout(() => { query.select(el).boundingClientRect(data => { if (data) { const index = this.index; this.guideList.splice(index, 1, { ...this.guideList[index], left: data.left, top: data.top, width: data.width, height: data.height }); } }).exec(); }, 10) }, next () { if (this.index === this.guideList.length - 1) { this.showGuide = false; uni.setStorageSync('guide_key', 'true'); } else { this.index += 1; this.getDomInfo(); } }, moveHandle () { return false; } },
五、样式展示
<style lang="less" scoped> .guide { position: fixed; top: 0; left: 0; right: 0; bottom: 0px; z-index: 1000; .guide-box { position: fixed; z-index: 100; transition: all 0.2s; &::before { content: ''; height: 140rpx; width: 140rpx; border: 1px dashed #fff; border-radius: 12rpx; position: absolute; top: -12rpx; left: -12rpx; } .arrow { height: 20rpx; width: 20rpx; background: #DC5F45; position: absolute; top: 144rpx; left: 50%; transform: rotate(45deg); } .tips { background: #DC5F45; box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1); color: #fff; position: absolute; top: 152rpx; left: -50%; padding: 15rpx 20rpx; font-size: 28rpx; border-radius: 12rpx; .text { white-space: nowrap; } .next { text-align: right; padding-right: 0rpx; margin-top: 10rpx; } } } } </style>
参考网站: https://introjs.com/docs/examples/basic/json-config
分类:
JavaScript
, Vue
标签:
新手引导
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入
· .NET 开发的分流抢票软件,不做广告、不收集隐私
· ASP.NET Core - 日志记录系统(二)
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 实现windows下简单的自动化窗口管理