- 博客(6)
- 收藏
- 关注
RSS订阅原创 前端实现落雨+涟漪效果
雨滴的样式其实是宽1像素，高度不同的白色长方块，下落的动画都是相同的，通过改变长方块的高度，透明度以及动画发生的时间呈现出参差不齐的效果，从而达成落雨的效果，详见下方代码。话不多说，先看视频，满足所需再往下撸代码（以下代码均基于vue3）此效果由两部分组成，落雨+涟漪。
2023-06-02 17:49:54
623
3
原创 如何实现弹窗一天只弹一次的需求
你是否有这种需求，页面需要对用户有一个信息提示的弹窗，但是为了骚扰次数过多导致用户的反感于是产品要求一天只弹一次，服务器显需求太小懒得搭理，于是“重任”就落在你的头上，跟我来，一招搞定一天一次的弹窗！解决思路是：进页面的时候判断本地是否保存的有日期并且日期是否是当天日期，若是，证明今天已经领过了，否则就弹窗，并把当天日期存到本地，下面提供在vue3环境下的伪代码，仅供参考。.........
2022-08-30 11:10:45
3019
2
原创 vue3实现H5监听浏览器回退并阻止回退
当你的移动端页面有弹窗的组件并且这个组件不是来自于某些知名的组件库，你是否有这样的需求？当用户唤起弹窗之后又按下了手机自带的回退键，弹窗之前的页面也被关掉了，而用户本身的意愿是关掉弹窗而已。如果你也有这样的诉求，这篇文章帮你解决！1.给history增加一条记录手机自带的回退键默认是回到上一个页面，所以我们用watch监听，在弹窗弹起的时候我们给history添加一条记录保证在按下回退键后能保持在当前页（用到的是vue3的监听），我这个页面有三个弹窗，同时监听三个变量，当为true时弹窗唤起，记得.
2021-10-13 11:50:12
6282
原创 H5适配iPhoneX底部小黑线，CSS一招搞定！
做移动端H5的同学，在你的前端开发生涯中，是否遇到过这种问题？浮在手机屏幕底部的功能区，在你的安卓和苹果的大部分机型上展示极其完美：这种可是在iPhone上却是这种？！？遇到这样的情况，不要着急，不用js，不用vue，css一招教你轻松搞定！iPhoneX取消了物理按键，改成了底部的小黑线，这一改动就引发了移动端的屏幕适配问题，对此，我们需在底部留有安全距离，具体解决方法如下：1.正常机型一般这种底部的功能区都是不随页面滚动而变化的，我这里用的是固定定位，用vant...
2021-10-13 11:03:08
1677
原创 关于babel配置使用可选链
什么是可选链具体而言它是一种操作符（?.），MDN给出的官方解释是：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符，不同之处在于，在引用为空(nullish)(null或者undefined) 的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。个人理解是：当不能确定对象中某个属性的时候，可以简化掉if-else的条件判断，使表达式更简明，同时...
2021-09-08 11:52:04
4421
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人