h5的localStorage在ios环境不好用，iphoneX适配，vue兄弟间传值等随笔

总结：
1 ios上 低端机localStorage性能差，可能不适用。
localStorage写是写进磁盘，localStorage读是直接访问磁盘，再读到内存。
情况1：主页点击后，存储item，并跳转。可能在跳转之前还没有存储进磁盘。到了详细页，拿不到item。反复点击到详情页与主页，可能存在错乱，读取的总是上次点击存的。

2 iphoneX适配及蒙层遮不住的问题。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
加viewport-fit=cover，让内容填充进顶部和底部的圆弧区域内。中间区域叫安全区域。
body {
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}
是让横竖屏的时候，都是填充。

蒙层遮不住，给padding-bottom：顶44+底34=78；
页面高度必须得够document.documentElement.clientHeight+78;

3vue兄弟间传值：
新建一个eventVue.js:
import Vue from 'vue'
export default new Vue
在：eventVue.$on("refresh",(message)=>{
//执行相应逻辑
})
在：eventVue.$emit("refresh");即可。

 

3禁止ios点击会出现灰色闪烁。-webkit-tap-highlight-color: transparent;

4禁止复制。
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

5ios与h5交互的桥

6 async await

7 动画组件

 

8父设置透明度，子也会有透明度。解决方法见下面网址。

http://leegorous.net/tools/bg-alpha.html

  

input:focus{  }