在ios中fixed定位元素丢失，Date兼容NaN

ゝ一世哀愁。 2022-10-19 00:55 116阅读 0赞

## Aphorism ##

## Preface ##

差不多有半年没有更新blog了， 现在在新的公司适应了，最近喜得一千金，也慢慢适应了新的生活。

今天更新一篇关于最近遇到的 ios fixed定位元素丢失 bug

iphonex 上 Date 兼容问

## 一. fixed问题现象 ##

手机环境： ios 11.0.3

1.  预期的展示效果： 图片显示完成，添加作业按钮正常 fixed定位  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]
2.  实际展示效果： 图片显示不全，且fixed 定位元素消失了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]
3.  如下图，**添加作业按钮（fixed定位）对应的*父元素* 高度没有撑开*全屏*，** 这就是 产生bug 的原因

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 2]  
4. 解决方案：  
直接让fixed定位元素的父元素高度撑开即可，我当前的场景是撑开父级元素，*没有测试是不是只要有dom元素沾满全屏即可*

## 二、 iphonex 上 Date 兼容问题 ##

手机环境： iphonex+

1.  现象  
    因为已经百度解决了，所以没有错误图。  
    问题描述： 在 通过 dateString 转换成 Date 实例对象时候 产生了bug，具体抓换结果不知道，程序运行完，展示 NaN…
2.  解决方案：  
    在使用形如 `yyyy-MM-dd HH:mm:ss` dateString 通过 Date 函数转换的时候，使用 slash （斜杠） 代替 dash (横杠）如下代码：

> dateString.replace(/-/g, ‘/’)

methods: {
        
        formateValues (values) {
        
          const [year, month, date, hour, min] = values.map(value => value.replace(/[^\d]/g, ''))
          return new Date(`${
          year}-${
          month}-${
          date} ${
          hour}:${
          min}`.replace(/-/g, '/'))
        },
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]: /images/20221005/f860c5b19bb4475f9bc6d2e21ae3d666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]: /images/20221005/3151f370198a410baa69faaad3eee519.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 2]: /images/20221005/25f7bac93668428e90b0dae8bd99602d.png