問題和知識點總結
阿新 • • 發佈：2019-05-15
reload 技術 ray tps gulp true locals article 總結
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]
問題和知識點總結