微信小程序的样式问题与踩过的坑

最近在做微信小程序的时候，发现他的样式并不和传统的html和css一样。特此记录一下问题。

1. 小程序的video标签不能用fixed定位到页面上，解决办法是禁用页面的滚动，需要滚动的部分用scroll-view模拟。 同时发现所有的video标签（包括h5和pc和小程序）都有个关于间距的问题，就是当video标签会对紧跟着的标签有间距，大约是15px左右（具体值无从得知）。解决办法是在外面套一个块标签，专门单独限制video标签 。

   最新版本已经解决了video的问题，可以当作普通标签正常使用。（2019年2月更新）

2. 微信小程序在一部分使用自定义导航栏一部分用原生时，会出现跳转时页面往下拉的短暂动画，在手机性能不好时，会相当明显。并且在后面的页面需要重新获得windowHeight，因为会发生变化。所以建议要么整个项目使用自定义导航栏，要么都用原生的。

3. 微信小程序在用scroll-view模拟下拉刷新时，会在页面刚加载出来时，会显示一下scroll-view最顶部的内容。暂时没有想到好的办法。（可以尝试将下拉刷新的动画定位放到页面下面，因业务需求暂无尝试）

4. toLocaleDateString方法的兼容。 这个方法本来是为了格式化时间减少js操作的，但是在小程序的使用中却发现了兼容性问题，真机模拟一切ok，然后在ios上正常，在android上缺发现失效，相当于没有使用。所以慎用，解决办法是使用date的getfullyear等方法自己封装。

5. textarea在iOS上会出现左右两边有间距的问题，Android上正常，解决方法是判断os自己手动改间距。

6. textarea在手机上的fixed定位问题，需要通过设置 属性 fixed：true 以及结合cursor-spacing来达到效果。

7. 小程序fixed等mask出现的穿透问题，可通过父元素movestart和tap直接拦截。

其他的会在以后碰到后持续记录。