1、gulp的使用
移动端的页面很多时候在本地和真机上的表现是不一样的,所以写出的页面需要真机上查看,所以使用gulp再本地搭建服务器就可以实现了(在之前项目的基础上做的修改)
设置端口
1 const gulp = require('gulp'); 2 const connect = require('gulp-connect'); 3 const open = require('gulp-open'); 4 5 const rootPath='./'; 6 gulp.task('serve',function () { 7 connect.server({ 8 root:rootPath, 9 livereload:true, 10 port:5000, 11 host: '172.16.2.97' 12 }); 13 open('http://localhost:5000'); 14 });
命令 gulp就可以运行项目了
2、移动端 ios页面滑动卡顿
来源:https://blog.csdn.net/qq_39635302/article/details/79477596
<div class="containBox no-scrollbar"> <div> 滚动的内容 </div> </div>
1 //清除滚动条 2 .no-scrollbar::-webkit-scrollbar{ 3 width: 0; 4 height: 0; 5 } 6 7 //滚动容器 8 .containBox{ 9 width: 100%; 10 position: absolute; 11 top: 50px; 12 left: 0; 13 right: 0; 14 bottom: 50px; 15 overflow-x: hidden; 16 /*overflow-y:auto;//不能写,会和下面的产生冲突*/ 17 -webkit-overflow-scrolling: touch; 18 }
但是出现了一个问题,先看页面结构
<body> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </body>
上下都是定位元素,中间的区域滚动,结果就是滚动时遮挡住了上面和下面的固定元素 ,比较麻烦的是每次修改后要查看效果还得要服务端上线,所以本地起了一个服务器,果然这样用起来很爽。
现在问题解决了,但是到底什么原因导致的还不是很清楚,说下解决办法:
其实把body上的样式 overflow-x: hidden;-webkit-overflow-scrolling:touch; 去掉就可以了,只需要在滚动区域content上添加滚动效果。具体原因不是很清楚,猜测是因为在滚动区域写了固定定位元素的问题
3、cookie和localstorage缓存数据
cookie能设置有效期但是不能缓存对象数组,且存储控件小
storage能缓存对象,但是不能设置有效期
4、创建特定大小的数组
[...Array(3).keys()] // [0, 1, 2]