【前端】vant组件移动端兼容性问题汇总

记录使用vant组件开发过程中遇到的兼容性问题

一、【van-calendar】van-calendar初始化空白

• 问题截图：
• 解决方法： 模拟滚动触发日历组件的加载，在van-calendar上绑定@open="openCalendar"事件

openCalendar () {
  // 解决bug 部分机型刚打开白屏，滑动后才可
  this.$nextTick(() => {
    const dom = document.querySelector('.van-calendar__body')
    if (dom) {
      let back = dom.scrollTop
      // 模拟滑动，避免白屏
      setTimeout(() => {
        back = dom.scrollTop
        dom.scrollTop = back - 4
        console.log('scroll-start', back)
      }, 10)
      setTimeout(() => {
        dom.scrollTop = back
        console.log('scroll-end')
      }, 100)
    }
})

参考来源：vant 日历插件，部分全面屏手机显示不出来

二、【van-popup】IOS上popup重叠

• 解决方法： 更改挂载节点，在van-popup上加get-container=“body”

参考来源：vant兼容问题之van-popup组件在ios上出现重叠问题

三、【van-uploader】IOS和安卓兼容相机和文件上传

当accept="image/*“时，IOS文件选择时文件置灰无法选择；
当accept=”"时，安卓上无法选择拍照上传。

• 问题截图：
• 解决方法： 判断当前系统，分情况对accept赋值

            let ua = navigator.userAgent.toLowerCase();
            if(ua.indexOf('iphone') != -1){
                return ''
            }else{
                return 'image/*'
            }

效果截图：

四、【van-datetime-picker】IOS上时间显示NaN

• 解决方法： 如果你遇到了在 iOS 上无法渲染组件的问题，请确认在创建 Date 对象时没有使用new Date(‘2020-01-01’)这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是new Date(‘2020/01/01’)。

参考来源：DatetimePicker 时间选择

持续更新中……