記錄使用vant組件開發(fā)過程中遇到的兼容性問題
一、【van-calendar】van-calendar初始化空白
-
問題截圖：
-
解決方法：
模擬滾動觸發(fā)日歷組件的加載，在van-calendar上綁定@open="openCalendar"事件
openCalendar () {
// 解決bug 部分機(jī)型剛打開白屏，滑動后才可
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 日歷插件，部分全面屏手機(jī)顯示不出來
二、【van-popup】IOS上popup重疊
-
解決方法：
更改掛載節(jié)點(diǎn)，在van-popup上加get-container=“body”
參考來源：vant兼容問題之van-popup組件在ios上出現(xiàn)重疊問題
三、【van-uploader】IOS和安卓兼容相機(jī)和文件上傳
當(dāng)accept="image/*”時，IOS文件選擇時文件置灰無法選擇；
當(dāng)accept=“”時，安卓上無法選擇拍照上傳。
-
問題截圖：
-
解決方法：
判斷當(dāng)前系統(tǒng)，分情況對accept賦值
let ua = navigator.userAgent.toLowerCase();
if(ua.indexOf('iphone') != -1){
return ''
}else{
return 'image/*'
}
效果截圖：
四、【van-datetime-picker】IOS上時間顯示NaN
-
解決方法：
如果你遇到了在 iOS 上無法渲染組件的問題，請確認(rèn)在創(chuàng)建 Date 對象時沒有使用new Date(‘2020-01-01’)這樣的寫法，iOS 不支持以中劃線分隔的日期格式，正確寫法是new Date(‘2020/01/01’)。
參考來源：DatetimePicker 時間選擇文章來源：http://www.zghlxwxcb.cn/news/detail-495519.html
持續(xù)更新中……文章來源地址http://www.zghlxwxcb.cn/news/detail-495519.html
到了這里，關(guān)于【前端】vant組件移動端兼容性問題匯總的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
