- 博客(21)
- 资源 (2)
- 收藏
- 关注
原创 如何优雅地搞定多个判断,别告诉我你只会if-else和switch
最近在弄个人网站,开始更系统的思考一些优雅写法,之前工作中经常运用到的多状态操作最开始是这样写,写好一个, 其他复制粘贴,虽然直接,但是代码块略微庞大,这种简单赋值尚且如此,更不用说其他复杂操作了let room = this.$route.path.split('/').splice(-1).join()let current = 0if(room === 'porch'){ current=1}else if(room === 'living') { current=2}
2020-06-25 11:36:19
708
原创 微信小程序-自定义子组件-按钮组
由于项目需要,频繁使用到按钮组,如图所示,后期优化代码时,提炼出了自定义的子组件。效果如下图:父组件:<!--button-group/button-group.wxml--><view class="btn-group-wrap"> <view wx:for="{{dataList}}" wx:for-item="item" wx:for-inde...
2020-04-26 13:24:19
1917
2
原创 微信小程序-时间轴/抽屉展开收起特效
微信小程序项目中用到的时间轴展示和抽屉展开收起特效本篇内容为原创,转载请注明出处。一、效果图二、代码片段:1、wxml部分<view class="card"> <view class="cardTitle" bindtap="changeUpDown">我是标题 <!-- 项目里面用的是iconfont标签-箭头 --> <...
2020-04-13 17:54:23
2272
原创 vue开发中遇到的问题与解决方案(四)
一、style里动态拼接变量:style="'background-color:rgba(0,0,255,'+变量名称+')'"(看起来是三个引号是因为双引号里面是单引号,无空格)二、vue将方法挂载原型上三、获取对象属性lengthObject.getOwnPropertyNames(obj).length四、短路运算运用过程中相当于if条件和行使句;1、&a...
2019-06-26 14:29:41
719
原创 vue开发中遇到的问题与解决方案(三)
vue处理数组会有些问题:官网摘要:由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newV
2018-01-22 16:37:50
841
原创 iviewUI使用中遇到的问题与解决方案(二)
1、列表中使用switch时在切换状态时用到拦截弹框,要使用原生事件@click.native2、DatePicker 使用校验的话,绑定数据不能用:value,而要用v-model,前者校验有问题。3、icon添加事件@click.native=fn()4、在返回选项时,是否将 label 和 value 一并返回,默认只返回 value,写法 =》 :label-in-value = "t
2018-01-18 09:35:12
3876
2
原创 vue开发中遇到的问题与解决方案(二)
1、vue里获取原生键盘事件this指向问题:var _this = thisdocument.onkeydown = function (e) {var ev = e || window.eventif (ev.keyCode === 13) { _this.fn}}2、vue渲
2018-01-17 10:35:57
1610
原创 关于js原生的一些问题整理(一)
1、原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中,不能使用2、cssText:(1)相关链接:https://www.cnblogs.com/majingyi/p/6840818.html (2)本质:设置 HTML 元素的 style 属性值(3)用法:document.getElementById("d1")....
2018-01-17 09:18:32
685
原创 IE浏览器数字显示为电话号码问题
开发中遇到的这个在IE浏览器中显示问题,如上图所示,点击之后会出现:原因:如果装有Skype插件,会自动将数字识别为电话号码处理方法:html文件中加上
2018-01-08 10:56:49
2114
原创 实现简单的竖向tab
项目中需要用到竖版的Tab,但是用的框架没有合适的,所以没办法,只能自己写了,希望能帮助到其他人。写的比较简单,只符合自己使用的效果,大神勿喷。效果是这种的:标签数量很多,超出部分可以点击上下的icon切换滚动,用的是vue和iviewUI的icon实现的template>div class="tabWrap">div class="tabNav
2018-01-04 14:07:33
6649
原创 项目中Eslint的使用心得
vsCode编辑器配置Eslint保存直接格式化:2、vue里面禁用eslint方法:/* eslint-disable *///要禁用的代码内容/* eslint-disable */vue里面禁用eslint方法:
2018-01-03 17:30:31
1455
原创 iviewUI使用中遇到的问题与解决方案(一)
项目中使用的iviewUI的版本是2.7.3,在使用中遇到的问题总结了一些,后续会更新,如果各位大神有遇到的坑欢迎评论补充1、modal的样式要放到最外面,否则样式给不到;2、iview组件的事件@on-change=fn,fn后面没有‘(参数)’;3、router-view不能放到tabs里面,组件会渲染两次,要把它单独拿出来4、FormItem里面input或者select不能用:model动
2018-01-03 17:27:59
14419
1
原创 Vue开发中遇到的问题与解决方案(一)
vue生命周期函数:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html1、在watch或者created里面操作dom,用this.$nextTick(function(){ xxxx})2、class动态绑定 三元写法::class="[isShowTab?'showTab':'
2018-01-03 16:55:48
12526
原创 node初探(1)--创建聊天服务器
本系列文章为对Node学习过程中的总结,默认Node已经安装成功,具体安装方法百度即可。第一步,在Node中创建一个新的TCP服务器//加载net模块var net = require("net")//调用net.createServer()方法创建一个新的TCP服务器var chatServer = net.createServer()//用on方法添加事
2017-10-25 14:46:44
369
原创 浅谈vue $mount()
Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、判断等),之后要手动挂载上。new Vue时,el和$mount并没有本质上的不同。具体见代码:顺便附上vue渲染机制流程图:
2017-10-23 17:52:57
73383
6
原创 关于虚拟技术的遐想--室内健身
今天骑自行车去地铁站,脑子里冒出了个想法,写出来乐呵乐呵背景:现如今人工智能、虚拟技术十分火热,未来前景也是很乐观,如果能广泛的应用在人们的生活中,既方便了自己,又娱乐大众,岂不美哉~!闲话少说,直奔想法~~这是关于虚拟技术应用在室内自行车健身,简单讲就是带着虚拟工具(比如VR眼镜,当然随着技术的推进可能有更多工具出现),进行室内自行车健身。写这篇博文的时候顺便查了一下,网上还真的已经出现
2017-10-11 09:26:44
413
原创 github项目学习--Vue结合Pug模板引擎
今天看到github上面一个vue项目,用的是Pug模板写的,很多人不知道Pug是什么,但要说到jade,相信很多人反应过来了。没错,Pug前身就叫jade,但是由于商标等问题,改名为Pug,当然,语法还是和原来一样。那Vue究竟如何与它结合的呢?首先,除了要安装pug,还要安装pug-clinpm install -g pugnpm install -g pug-cli说实话,
2017-09-06 14:16:17
11796
3
原创 h5的video播放功能
找到了很久以前写的播放video的代码,最基本版,因为这样最直接,就没优化,比如同类的按钮可以共用一个,点击进行切换等等。样式也是最朴素,以实现功能为主了。 具体功能如图:代码如下: video{ margin: 30px auto; background-color: black; } .range1{ width: 500p
2017-09-05 15:54:54
5526
原创 github项目学习—— 移动端比较好的插件
今天研究github关于vue+axios项目时发现了一个移动端比较好的插件,特意去查了一下。一、fastclick.js——用来解决移动端300ms延时问题。插件原理:FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下 1、在页面中引入fast
2017-09-04 11:31:07
1106
原创 windows下安装react-native环境--采坑之旅
windows下安装react-native环境--采坑之旅,希望可以帮助到有需要的人。。。
2017-08-22 14:54:26
351
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人