H5 中 iOS 端 倒计时失败问题

项目中引用了 vant 里面倒计时的组件,发现这个倒计时的在安卓是正常的,可是在 ios 却出现问题。。。

描述:项目用到了 vant 的 Dialog 组件,因为倒计时结束之后有弹框提示,结果安卓正常显示弹框,ios 却不显示。。。

最后排查是时间格式导致的,因为 yyyy-mm-dd hh:mm:ss 这种格式在苹果手机上无法识别,显示成NAN。然而转成 yyyy/mm/dd hh:mm:ss 这种格式就可以了。

解决方式如下:

Django 模板:

var beginAtTime = "{{begin_at | date:'Y/m/d H:i:s'}}"

Vue

<template>
    <div>
        倒计时: <van-count-down class="time" :time="time" format="DD天 HH:mm:ss " />
    </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      time:0,
      nowTime: new Date().getTime()
    }
  },
  created(){
    //解決ios 对日期格式的bug!!!!!!!!!
    let endTime=new Date('2021-12-27 16:10:10'.replace(/-/g,'/')).getTime() // 👈重点在这里
    let time =endTime - this.newTime;
    this.time = time;
  }
}
</script>

 

posted @ 2021-12-27 16:02  Freya~  阅读(329)  评论(0)    收藏  举报