摘要:
<span title="this is span's title">鼠标悬停几秒查看title内容</span> 阅读全文
摘要:
对于未知高度的盒子,如何实现展开收起的transition过渡效果 我们经常碰到一种情况,点击某个按钮需要对某个盒子的内容进行展开收起,很多时候我们会用display:none | block;实现其内容的出现和消失。但这个办法做出来的视觉效果很生硬,这时候我们就想用transition做过渡动画的 阅读全文
摘要:
今天说一个在移动端可移动浮标按钮的react实现 中心思想就是利用浮标的left、top样式来控制浮标移动。 HTML代码: <div id="ballId" onTouchStart={(e) => { e.stopPropagation(); }} onTouchMove={(e) => { e 阅读全文
摘要:
这两天碰到一个场景,需要做一个动态背景,在web端,ios端,android端呈现相同的效果——就是要动起来。 上面这个问题看起来很简单,实操起来却碰到了一些意外的困难。首先是设计师提供的“动图”是个视频,就是mp4。我要求过给个gif,但得到的回复是转gif文件会很大,且不清晰。由于gif文件过大 阅读全文
摘要:
最近在开发项目时发现,在移动端input里面的placeholder字体偏下,但PC端却是垂直居中,而两者的代码几乎相同,只是字体大小有差异,查询发现原来就是它惹的祸。 原因: 输入的文字font-size大于placeholder的font-size。 当时我的代码中PC端与移动端的font-si 阅读全文
摘要:
现象: 今天在写react的时候发现一个奇怪的现象,每次我点击按钮之后,数据会更新,接着页面也刷新了,导致我更新的数据回到初始化状态(因为data数据存在state里面,所以页面刷新,data也会重新初始化)。 原因: button写在form表单里面,form表单提交会默认刷新页面。 <form> 阅读全文
摘要:
报错:Cannot read properties of undefined (reading 'props') 原因:点击按钮调用父组件的add方法控制台报错,错误发生在子向父传值(子组件修改父组件的值)的过程中。是this指向不正确导致。 错误代码: 子组件代码 这里发现this打印出来是und 阅读全文
摘要:
报错:no such file or directory 解决:删除node_modules文件夹,重新安装(npm i / anpm i) 阅读全文
摘要:
chrome中input默认样式 - border-style :inset 今天在自定义input样式的时候发现,chrome浏览器下input的上和左边框像有阴影一样,跟另外两个边框不太一样,最后排查发现是border-style:inset的问题,这是个3D样式效果,只需要修改为:border 阅读全文
摘要:
写过scss和css的都知道,scss可以嵌套样式选择器,感觉更符合写代码的逻辑和思维。所以我也是更愿意在项目里引用scss的。下面简单介绍下引入的步骤和引入踩的坑。 引入步骤 1、安装node-sass、sass-loader npm i node-sass@4 sass-loader@10 -d 阅读全文