Vant2移動(dòng)端Vue組件庫問題記錄
發(fā)布初衷 :
記錄在移動(dòng)端項(xiàng)目中使用 Vant 2 組件庫時(shí)遇到的各種問題 ,
方便以后再次遇到類似問題 , 能夠快時(shí)查閱解決
Popup 彈出層
介紹
彈出層容器,用于展示彈窗、信息提示等內(nèi)容,支持多個(gè)彈出層疊加展示。
問題記錄 : Field 輸入框 和 Popup 彈出層 兩個(gè) 結(jié)合 使用 時(shí) ,
在 iPhone 真機(jī)上測(cè)試的時(shí)候 出現(xiàn)的一個(gè)小 bug :
點(diǎn)擊 Field 輸入框 的時(shí)候 , 第一次會(huì) 彈出 一個(gè) 手機(jī)的鍵盤輸入框 ,
點(diǎn)擊第二次的時(shí)候 才出來 Popup 彈出層 里面的內(nèi)容 ( 比如 日期選擇器 )
解決方案 :
給 Field 輸入框 設(shè)置 readonly ,通過
readonly
將輸入框設(shè)置為只讀狀態(tài)
輸入框
van-field
必須得加入readonly
這個(gè) 只讀屬性 ,不然會(huì)導(dǎo)致 用戶手機(jī) 觸發(fā) 默認(rèn)鍵盤 遮擋 你的彈窗和選擇器內(nèi)容 影響體驗(yàn)
也不要用
disabled
來禁用輸入框 , 樣式會(huì)變成禁用狀態(tài)下的樣式很難改動(dòng)只需要設(shè)置為只讀即可 , 也不會(huì)觸發(fā)手機(jī)鍵盤
DatetimePicker 時(shí)間選擇
介紹
時(shí)間選擇器,支持日期、年月、時(shí)分等維度,通常與彈出層組件配合使用。
確認(rèn)選擇的時(shí)間數(shù)據(jù)是需要自己處理的,詳見 confirmPicker 方法
<template> <div class="seller"> <van-cell title="開始時(shí)間" is-link :value-class="className" :value="timeValue" @click="showPopup" /> <van-popup v-model="show" position="bottom"> <van-datetime-picker v-model="currentDate" type="datetime" title="選擇時(shí)間" :loading="isLoadingShow" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @cancel="show = false" @confirm="confirmPicker" /> </van-popup> </div> </template> <script> export default { name: 'Seller', data () { return { msg: '商家頁面', timeValue: '請(qǐng)選擇時(shí)間', show: false, isLoadingShow: true, currentDate: new Date(), minDate: new Date(), maxDate: new Date(2020, 12, 31), className: '' } }, methods: { // 顯示彈窗 showPopup () { this.show = true this.isLoadingShow = true setTimeout(() => { this.isLoadingShow = false }, 500) }, // 確認(rèn)選擇的時(shí)間 confirmPicker (val) { let year = val.getFullYear() let month = val.getMonth() + 1 let day = val.getDate() let hour = val.getHours() let minute = val.getMinutes() if (month >= 1 && month <= 9) { month = `0${month}` } if (day >= 1 && day <= 9) { day = `0${day}` } if (hour >= 0 && hour <= 9) { hour = `0${hour}` } if (minute >= 0 && minute <= 9) { minute = `0${minute}` } this.className = 'timeClass' this.timeValue = `${year}-${month}-${day} ${hour}:${minute}` this.show = false }, // 選項(xiàng)格式化函數(shù) formatter (type, value) { if (type === 'year') { return `${value}年` } else if (type === 'month') { return `${value}月` } else if (type === 'day') { return `${value}日` } else if (type === 'hour') { return `${value}時(shí)` } else if (type === 'minute') { return `${value}分` } else if (type === 'second') { return `${value}秒` } return value } } } </script> <style lang="stylus" rel="stylesheet/stylus" scoped> .seller .timeClass { color: #333; } </style>
Field 輸入框
介紹
表單中的輸入框組件。
問題記錄 : Field 輸入框 和 Popup 彈出層 兩個(gè) 結(jié)合 使用 時(shí) ,
在 iPhone 真機(jī) 上測(cè)試的時(shí)候 出現(xiàn)的一個(gè)小 bug :
點(diǎn)擊 Field 輸入框 的時(shí)候 , 第一次會(huì) 彈出 一個(gè) 手機(jī)的鍵盤輸入框 ,
點(diǎn)擊第二次的時(shí)候 才出來 Popup 彈出層 里面的內(nèi)容 ( 比如 日期選擇器 )
解決方案 :
給 Field 輸入框 設(shè)置 readonly ,通過
readonly
將輸入框設(shè)置為只讀狀態(tài)
輸入框
van-field
必須得加入readonly
這個(gè) 只讀屬性 ,不然會(huì)導(dǎo)致 用戶手機(jī) 觸發(fā) 默認(rèn)鍵盤 遮擋 你的彈窗和選擇器內(nèi)容 影響體驗(yàn)
也不要用
disabled
來禁用輸入框 , 樣式會(huì)變成禁用狀態(tài)下的樣式很難改動(dòng)只需要設(shè)置為只讀即可 , 也不會(huì)觸發(fā)手機(jī)鍵盤
Picker 選擇器
介紹
提供多個(gè)選項(xiàng)集合供用戶選擇,支持單列選擇和多列級(jí)聯(lián),通常與彈出層組件配合使用。
業(yè)務(wù)場景 :
一開始以為只能渲染純數(shù)組
但后來用的時(shí)候 , 后端返回來的數(shù)據(jù)結(jié)構(gòu)是 數(shù)組嵌套對(duì)象的模式 ,
因此還特意將數(shù)組對(duì)象里面的數(shù)據(jù)專門篩選出來一個(gè)新數(shù)組用于渲染。。
但后來傳參的時(shí)候需要數(shù)據(jù)結(jié)構(gòu)里面的其他數(shù)據(jù)用于傳參
所以又找了找這個(gè)Picker選擇器可不可以渲染數(shù)組對(duì)象結(jié)構(gòu)的案例 :
發(fā)現(xiàn) [ { } ] , 是可以渲染的 ,只不過還要做一下處理 :
使用案例 :
<van-popup v-model="showTitle" position="bottom" > <van-picker title="標(biāo)題" show-toolbar value-key="name" :columns="columns" @confirm="onConfirm" @cancel="onCancel" /> </van-popup>export default { data() { return { showTitle: false, columns: [], // 后端請(qǐng)求的數(shù)據(jù) queryFrom: { id: null, name: '', } }; }, methods: { onConfirm(value, index) { this.queryFrom.id = value.id // 需要傳給后端的id值 this.queryFrom.name = value.name // 用于渲染選擇器列表數(shù)據(jù) this.showTitle = false // 關(guān)閉彈出層 }, onCancel() { this.showTitle = false }, }, };
補(bǔ)充知識(shí) :
vant-ui 之 Field 輸入框 和 Picker 結(jié)合使用時(shí) ,如何綁定正確的 id 類型的值的問題 。
很常見的需求 :
表單中的一項(xiàng) ,需要從 picker 控件中選擇正確的值后 ,展示的是字符串 ,
然后提交到后臺(tái)服務(wù)器的則是字符串對(duì)應(yīng)的 value 類型的值的問題。
點(diǎn)擊表單的檔案組,彈出 Picker 選擇組件 ,選擇正確的值 ,填充到表單項(xiàng) ,但是 ,
提交到服務(wù)器去,需要提交對(duì)應(yīng)的 id ,而不是看到的字符串。
如何實(shí)現(xiàn) ?
定義兩個(gè)屬性,id 和 name , 兩個(gè)是一 一對(duì)應(yīng)的關(guān)系 。
在 van-picker 中 ,綁定的 confirm 函數(shù) ,參數(shù)獲取到的是一個(gè)對(duì)象
在這個(gè)函數(shù)內(nèi),同時(shí)更新 id 和 name ,保證他倆一 一對(duì)應(yīng) 。
onConfirm(value, index) { this.queryFrom.id = value.id // 需要傳給后端的id值 this.queryFrom.name = value.name // 用于渲染選擇器列表數(shù)據(jù) this.showTitle = false // 關(guān)閉彈出層 },
如何展示 默認(rèn)選中項(xiàng)
項(xiàng)目使用背景 :
用戶填寫表單時(shí) , 需要根據(jù)上面填寫的 乘車人數(shù) 來自動(dòng)讓下面的 Picker 選擇器
下拉時(shí) 默認(rèn)值 展示 與 人數(shù)相匹配 的 車輛類型
而又由于車輛類型是后端返回的數(shù)據(jù) , 并不是固定不變的 , 所以前端沒辦法寫死匹配方法
1、用戶輸入完 乘車人數(shù) 后 , 自動(dòng)發(fā)起請(qǐng)求 , 由后端來匹配相對(duì)應(yīng)的車輛類型
2、但是這里前端 Picker 組件需要用其索引值來展示下拉默認(rèn)值 , 后端又無法返給我索引
3、前端這里只能先請(qǐng)求車輛類型數(shù)據(jù)列表后 , 再請(qǐng)求匹配車型數(shù)據(jù)值 , 循環(huán)去匹配后拿到當(dāng)前匹配的索引值后再賦值給 Picker 組件
代碼實(shí)現(xiàn) :
根據(jù)乘車人數(shù)展示默認(rèn)選中項(xiàng) <van-picker show-toolbar title="車輛類型" value-key="dictLabel" :default-index="defaultMatch" :columns="applyType" /> data() { return { defaultMatch: 0, // 車輛類型下拉展示默認(rèn)索引值 applyType: [], // 車輛類型列表 } } methods: { // 根據(jù)乘車人數(shù)自動(dòng)匹配車輛類型 async blurMatchType() { let arr = [] // 先請(qǐng)求車輛類型列表數(shù)據(jù)用于匹配 let res = await this.getDicts('car_apply_type') if (res.code == 200) arr = res.data // 根據(jù)乘車人數(shù)請(qǐng)求匹配的車輛類型值 let ret = await getMatchType(this.userCarForm.riderNum) const { code, data } = ret if (code == 200) { // 循環(huán)匹配后賦值其索引值 arr.forEach((item, index) => { if (item.dictValue == data) { this.defaultMatch = index } }) } } }
List 列表
介紹
瀑布流滾動(dòng)加載,用于展示長列表,當(dāng)列表即將滾動(dòng)到底部時(shí),會(huì)觸發(fā)事件并加載更多列表項(xiàng)。
List 組件通過 loading
和 finished
兩個(gè)變量控制加載狀態(tài),當(dāng)組件滾動(dòng)到底部時(shí),會(huì)觸發(fā) load
事件并將 loading
設(shè)置成 true
。
此時(shí)可以發(fā)起異步操作并更新數(shù)據(jù),數(shù)據(jù)更新完畢后,將 loading
設(shè)置成 false
即可。
若數(shù)據(jù)已全部加載完畢,則直接將 finished
設(shè)置成 true
即可。
<van-list v-model="loading" :finished="finished" :finished-text="appList.length ? '沒有更多了' : ''" @load="onLoad" > <van-cell v-for="item in appList" :key="item" :title="item" /> </van-list> export default { data() { return { loading: false, finished: false, appList: [], // 用車申請(qǐng)列表 appQuery: { page: '1', // 要查詢的頁碼 rows: '10', // 每頁記錄數(shù)量 userId: null, // 用戶 Id } }; }, methods: { async onLoad() { // 異步更新數(shù)據(jù) let ret = await getAppList(this.appQuery) const { code, data } = ret if (code == 200) { this.appList = this.appList.concat(data.rows) // 加載狀態(tài)結(jié)束 this.loading = false; if (this.appList.length >= data.total) { // 沒有更多數(shù)據(jù)了 this.finished = true; Notify({ message: '已加載完全部訂單', background: '#ee0a24' }) } else { this.appQuery.page++ } } }, }, };
以上是正常情況下 , onLoad 滾動(dòng)到底部可以正常觸發(fā)加載下一頁數(shù)據(jù)
接下來就是說明一個(gè)不正常使用情況 , 此 bug 組件庫還未修復(fù)
就是 和 Tab 標(biāo)簽頁 組件 公用 :
我猜估計(jì)是包裹內(nèi)容的高度它無法斷定了吧 , 所以 onLoad 加載就有問題了
Tab 標(biāo)簽頁
<van-tabs v-model="active"> <van-tab title="標(biāo)簽 1"> <ApprovalItem type='1' /> </van-tab> <van-tab title="標(biāo)簽 2"> <ApprovalItem type='2' /> </van-tab> <van-tab title="標(biāo)簽 3"> <ApprovalItem type='3' /> </van-tab> <van-tab title="標(biāo)簽 4"> <ApprovalItem type='4' /> </van-tab> </van-tabs> data() { return { active: 2, }; },
主要注意點(diǎn)就是子組件的高度需要設(shè)置一下 ,
一開始嘗試的給 ApprovalItem 子組件一個(gè)高度 height:100% ,
但并沒有解決一直觸發(fā) onLoad 加載的問題 ,
后來改成 height:100vh , 就 OK 了 。。
沒別的了 , 就是記錄一下 , 提醒避坑 。
總結(jié)
到此這篇關(guān)于Vant2移動(dòng)端Vue組件庫問題記錄的文章就介紹到這了,更多相關(guān)Vant2移動(dòng)端Vue組件庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值
這篇文章主要介紹了vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07Vue動(dòng)態(tài)樣式方法實(shí)例總結(jié)
在vue項(xiàng)目中,很多場景要求我們動(dòng)態(tài)改變?cè)氐臉邮?下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決
這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過程中遇到的兼容性問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue3 el-upload單張圖片回顯、編輯、刪除功能實(shí)現(xiàn)
這篇文章主要介紹了vue3 el-upload單張圖片回顯、編輯、刪除功能實(shí)現(xiàn),圖片回顯時(shí)隱藏上傳區(qū)域,鼠標(biāo)懸浮顯示遮罩層進(jìn)行編輯、刪除操作,刪除圖片后顯示上傳區(qū)域,本文通過實(shí)例代碼分享實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2023-12-12vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例
本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08在vue+element-plus中無法同時(shí)使用v-for和v-if的問題及解決方法
由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾,但是報(bào)錯(cuò),百度說vue不能同時(shí)使用v-if和v-for,今天小編給大家分享解決方式,感興趣的朋友跟隨小編一起看看吧2023-07-07關(guān)于vxe-table復(fù)選框翻頁選中問題及解決
這篇文章主要介紹了關(guān)于vxe-table復(fù)選框翻頁選中問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09