![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web前端
文章平均质量分 50
Sport_18
从事web前端,喜欢阅读等
展开
-
attribute和property的区别
前言attribute 是 HTML 标签上的特性,也就是 html 代码中经常看到的键值对property 是 DOM 中的属性,是 JavaScript 里的对象示例attribute 会始终保持 html 代码中的初始值, 而 Property 是有可能变化的.<input id="the-input" type="typo" value="Name:" customAttr="customAttr" /> // 在页面加载后,在input中输入 "Jack"/原创 2021-10-19 08:52:06 · 238 阅读 · 0 评论 -
Event Loop 事件循环
前言在 JavaScript 中,任务被分为两种,一种 宏任务(MacroTask), 一种 微任务(MicroTask)宏任务:I/O、setTimeOut、setInterval、requestAnimationFrame微任务:process.nextTick、Promise.then、catch、finallyJavaScript 中有主线程 和 调用栈(执行栈),所有任务都会放入调用栈中等待主线程执行同步任务和异步任务分别进入不同的任务队列,同步的进入主线程,异步的进入 Ev原创 2021-10-18 20:16:38 · 122 阅读 · 0 评论 -
web 获取 scrollTop 无效
方法:参考文档var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;原创 2021-02-25 11:27:19 · 125 阅读 · 0 评论 -
scroll 主动滚动到指定元素
导言最近在做 H5 网页时,需要实现选择某一分类后,顶部导航栏也需要动态改变。但是顶部导航栏是横向滚动的容器,会出现动态选中后,元素没有出现在视窗内。方案需要给滚动容器内的每个子元素添加 id,方便之后获取对应 dom<div class="scroll"> <div id="item1">item1</div> <div id="item2">item2</div> <div id="item3">item3&.原创 2021-02-04 15:56:50 · 611 阅读 · 0 评论 -
微信小程序 selectComponent 获取组件为 null
最近在做一个需求时偶尔发现一个 bug ,排查很久后发现是因为调用 this.selectComponent 时没有获取到组件的问题。分析没有在父组件渲染时的生命周期中调用,所以不会是页面和组件的渲染流先后问题在其地方调用时能获取到,所以不会是组件的问题只有在某些时间点调用才会是 null ,分析那些时间点所做的操作原因在那个时间点里改变的一个值的判断,而组件使用 wx:if 来判断是否显示组件,而当不显示组件时,调用 this.selectComponent 为 null总结.原创 2021-01-18 10:49:18 · 2185 阅读 · 1 评论 -
微信小程序IOS端input框chang事件拿不到value值
最近在做小程序方面的需求,在使用过程中遇到一个问题,主要是出现在IOS端场景在IOS端 setdata方法修改 input 框绑定的 value 值,会触发 input 框绑定的 change 事件,但是在change 事件的参数中并没有返回该 value 值,同时在 input 框并不会显示修改的值。解决方案在执行 setdata 修改该value值时,添加 setTimeout 延迟函数,将 setdata 延时大约100ms的样子,亲测可用如下。changeInputValue() .原创 2020-11-26 16:27:17 · 694 阅读 · 0 评论 -
Vue在当前页面修改element组件的默认样式
在vue页面使用element框架的组件时,有时只需要修改当前页面组件的样式,不需要修改全部,所以不能通过修改框架的源代码实现1、在vue页面使用element元素,通过浏览器控制台可以找到对应想要修改的标签的class类一般可以找到想要修改的标签的上级元素class,用来限制选择。如想要修改如图的class为cell的标签,可以通过.el-table .cell来选择2、在当前vue页面下的style中,使用 /deep/ 或者 >>> 进行样式穿透如果样式被覆盖可以使用!.原创 2020-09-30 16:54:31 · 1201 阅读 · 0 评论 -
node入门之“hello world”
前端目前正处于技术爆炸的时期,随着互联网时代的发展,对于前端开发的要求也越来越高。node.js兴起后,已经成为前端不可缺少的必要技能,所以趁着时间充裕时,抓紧充充电。什么是node安装node.js第一步当然是需要先安装node,进入 node官网,下载安装包。第一个是稳定版本,第二个是最新版本,一般来说最好是下载稳定版本。下载完成后点击安装,一直next安装完成后,可以通过cmd执行“ node -v 和 npm -v ”分别查看node和npm的版本号,如果显示版本号则说明安装.原创 2020-06-06 12:03:27 · 382 阅读 · 0 评论 -
vue中mixins的使用方法和区别
Mixins基础和介绍混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。使用场景不同页面使用的方法类似,或需要的数据类似时,可以提取出公共部分,再混入不同页面中,方便统一管理和修改。使用方法1. 创建一个js文件// export一个需要混入的对象export default { data() { num: 0, },原创 2020-06-04 13:18:19 · 742 阅读 · 1 评论 -
js中 !! 操作的作用和其他使用技巧
最近在看到关于JavaScript代码中包含“!!”这样的操作,在网上查找了资料,并总结其用法和类似技巧js中!和!!操作在js中 “!” 操作符意味着取反操作,又因为js是弱类型语言,“!” 操作可以将变量转化为布尔值,null、undefined和空字符串取反都为true,其余都为false。!null=true !undefined=true !''=true !100=false !'abc'=false"!!"操作意味着先将变量取反,并转化为布尔值,然后再进行一.原创 2020-05-08 21:54:48 · 336 阅读 · 0 评论 -
Navicat for MySQL连接宝塔面板数据库
最近刚接触后端不久,在宝塔面板上部署了数据库后,不知道如何实时的查看和修改数据库的内容,查找资料后才解决问题,记录一下。1. 下载安装Navicat for MySQL软件(可以在网上找资源)2. 在云服务器的实例安全组放行3306端口因为MySQL的默认端口就是3306端口,不放行的话是无法访问连接的3. 在宝塔面板 => 安全配置放行3306端口,设置数据库访问权限...原创 2020-05-05 23:09:35 · 1365 阅读 · 0 评论 -
uniapp监控触摸事件结束
最近在uniapp组件中需要监听页面触摸结束的事件,但是框架只提供触摸开始的事件,百度借鉴后完成需求,特此记录,欢迎网友指正和提出不同方案。1.先监听触摸开始事件,如果是页面可以直接调用“onPageScroll”这个生命周期。如果是组件可以使用“scroll-view”的“@scroll”方法,以这种方法为例:<scroll-view scroll-y="true" scroll-...原创 2020-03-07 16:00:23 · 3516 阅读 · 1 评论 -
uni-app页面传参改变数据,绑定样式不刷新
a页面传入参数b页面接受参数b页面根据传入参数绑定样式;发现样式不会随之变化- 解决:传入的参数是字符串,而绑定样式使用的是绝对等于。可以把‘=== ’换成‘==’,或字符串转为数字类型...原创 2020-02-17 18:44:35 · 1086 阅读 · 0 评论 -
Uni-app动态绑定style值fonst-size报错
今天在使用uniapp动态绑定style值font-size一直报错,调试了很久,后来发现是一个很简单的原因,特意记录一下。如图绑定时报错报错:语法错误: Unexpected token, expected “,”只需要把 font-size 换成 fontSize 即可,如图所示...原创 2019-12-17 00:09:04 · 1255 阅读 · 1 评论 -
uniapp项目所遇问题总结
刚入职的新人接手的一个项目,遇到很多问题,在这里总结一下,方便以后回忆和改进。1.想让一个盒子内的text标签下的文字实现左下角对齐目前的解决办法是设置padding,使文字下移,同时需要设置box-sizing: border-box;2.设置字体小于12px(9px),使用transform: scale(0.75);,但是会留有空白,不能中间对齐目前的解决办法是设置:t...原创 2019-11-07 16:13:08 · 2424 阅读 · 0 评论 -
Vue 计算属性(computed)和侦听器(watch)
计算属性:computed本文章首更于掘金账号,主要是为了方便自己以后复习和回忆,有错误或不合理之处还请大家指正。作用减少模板中的计算逻辑进行数据缓存依赖固定的数据类型使用在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果通过getter/setter实现对属性数据的显示和监视注意点计算属性是基于它们的依赖进行缓存的,只有相...原创 2019-10-22 17:56:38 · 685 阅读 · 0 评论