开始接触vue已经有三个月左右,开始作了一个微信项目,发现用起来以后效果特别好,由于通过gzip压缩以后页面打开就250kb左右的资源加载;相对于以前使用anguarJs开发,实现效果比以前有很大的飞跃;微信项目作完以后,满怀信心的开始vue+cordova进行app开发;确没有想象中的顺利,下面是使用vue+mint-ui, cordova进行手机app开发的一些心得体会(主要以ios为主);
ios滚动优化
问题描述:在ios页面滚动过程当中,当手指离开页面的时候,页面就中止滚动,显得很不流畅,卡顿vue
方案:ios
一、-webkit-overflow-scrolling:touchweb
https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling
优势:解决页面滚动卡顿问题,页面滚动流畅,页面回弹效果;
缺点:穿透滚动,z-index不能穿透一切api
二、引入第三方的滚动插件,(better-scroll)
优势:微信
解决移动端滚动问题,本身能够控制滚动有主动权;
缺点:app
库有缺陷,慎用点击事件,api不够完美,会产生莫名其妙的bug
三、封装page组件用于控制滚动优化
优势:可以有效的控制-webkit-overflow-scrolling的值,当页面弹起时候使用设置组件的-webkit-overflow-scrolling值为auto就能够了, 缺点:不够自动化,须要不少变量去控制
键盘事件
问题描述:当键盘弹起时候,页面上移,顶部header应固定不动,(到如今依旧未找到合适的解决方案)解决方法:http://blog.csdn.net/lovelyel...
(不知道是否是个人姿式不对,并无解决个人问题)ui
三、顶部状态栏适配; 在ios开发中应该设置顶部状态栏为浮在整个页面以外,设置状态栏为背景透明;这样才能让整个h5页面撑满整个屏幕; 本人是理科生,文字表达能力不行,多多见谅,若是看到请多多提提意见,但愿往后可以更好的用文字表达本身的想法;