问题和知识点总结

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]

 

posted @ 2019-05-15 18:36  苦行僧ren  阅读(203)  评论(0)  编辑  收藏  举报