Loading

摘要: 1、针对需求:在React项目中,页面中一个导航栏,当页面向下滚动,导航栏即将消失时固定在视口顶部不动,当页面向上滚动,滚动到导航栏原始所在位置时,导航栏跟着下来,恢复初始布局; 2、实现方案: 1)样式代码中定义两个类,正常样式(.menu),固定在顶部时的样式(.fixed); 2)组件stat 阅读全文
posted @ 2019-02-27 17:39 CassielPang 阅读(2493) 评论(0) 推荐(0) 编辑
摘要: 1、在使用webpack打包项目时,可以在配置文件中配置resolve.alias来定义一些绝对路径,方便在项目中灵活使用路径,举例如下: 2、配置之后,引用会发生如下变化: 注意:scss和less文件使用绝对路径引入时,需要在引入路径前面加上‘~’,不然会报错,找不到对应路径; 波浪号是为了防止 阅读全文
posted @ 2018-11-27 15:58 CassielPang 阅读(4437) 评论(0) 推荐(1) 编辑
摘要: 一、computed和methods 我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式确实是相同的。 不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要计算依赖的值还没有发 阅读全文
posted @ 2018-05-29 14:09 CassielPang 阅读(738) 评论(0) 推荐(0) 编辑
摘要: 一、Flex布局使用时的坑: 1、常见的左右分布的flex布局中,左侧给定宽度,右侧占满剩余空间,但当右侧中文字内容很多时,会挤占左侧空间,时左侧不能按照定宽显示。 正确宽度显示如下: 但,当右侧红框内文字变多时: 显然当右侧文字增多,挤占剩余空间时左侧会被压缩,解决方法如下: 1)给右侧添加宽度“ 阅读全文
posted @ 2018-05-16 11:14 CassielPang 阅读(183) 评论(0) 推荐(0) 编辑
摘要: 一、校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9] 阅读全文
posted @ 2018-04-20 18:34 CassielPang 阅读(204) 评论(0) 推荐(0) 编辑
摘要: 一.环境准备 1.vue项目依赖 node.js npm,需要先安装node和npm,先检查本地是否安装node、npm 快捷键win+r 输入cmd 弹出操作框,如果电脑已经安装git,直接右键,选择Git Bash Here,也可弹出操作框 1)输入node -v 回车 会出现node.js的版 阅读全文
posted @ 2017-12-05 14:57 CassielPang 阅读(1024) 评论(0) 推荐(0) 编辑
摘要: <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.sto 阅读全文
posted @ 2017-11-24 16:13 CassielPang 阅读(1789) 评论(0) 推荐(0) 编辑
摘要: 前端开发过程中,我们时常需要获取页面及视口的相关高度,来实现一些定位、布局和滚动效果,下面总结了一些高度和宽度的获取方式,供大家参考:1.获取页面滚动条移动的距离页面的水平滚动距离----> document.body.scrollLeft;页面的垂直滚动距离----> document.body.scrollTop;特殊情况: 有时候发现document.body.scrollTop一直是0,... 阅读全文
posted @ 2017-11-20 15:46 CassielPang 阅读(876) 评论(0) 推荐(2) 编辑
摘要: 微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节。但是很多移动端页面的开发都是使用rem作为单位的,字体大小改变以后,会出现页面布局错乱的情况,因此希望能够禁止微信的字体放大功能,下面是通过查找资料找到的一些解决方法。 1.安卓手机禁止微信客户端修改字体大小 2.IOS系统禁止微信客户端修改字体大小 body { /* IOS禁止微信调整字体大小 */ ... 阅读全文
posted @ 2017-11-06 18:44 CassielPang 阅读(3641) 评论(0) 推荐(0) 编辑
摘要: 1.用JS判断浏览器是否是IE9以下,处理可能遇到的兼容性问题,或者给出浏览器版本过低的升级提醒。 if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].r 阅读全文
posted @ 2017-11-01 12:49 CassielPang 阅读(810) 评论(0) 推荐(0) 编辑