如图这样的引导功能该如何实现呢?
不写代码就狗带
- 发布:2020-07-29 14:51
- 更新:2020-11-17 13:32
- 阅读:3146
我们前不久使用UNI-APP进行H5开发时也遇到这样的需求, 然后再逛UNI-APP社区的时候发现了您的问题; 我这边大致将我这边的一个实现方式提取到了这个仓库里面 uni-step-guide 这是使用UNI-APP在H5中的实现;
整体实现方式其实很简单, 具体可以查看这个文件 step.js
其中我们依赖了一个CSS的mix-blend-mode的属性, 这也是实现的透过蒙层的关键之处, 你可以查看这里mix-blend-mode
如果你是在APP中使用, 这个属性可能在一些低版本安卓设备上不支持, 那其实也不影响你整个引导的流程 (可以使用透明的蒙层+ 阴影 + 定位来实现, 就不会存在需要透过背景的情况了)