【前端】vant组件移动端兼容性问题汇总-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端】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/*'
            }

效果截图：
【前端】vant组件移动端兼容性问题汇总