Vant Weapp組件踩坑:picker的初始賦值解決
在使用vant的picker組件時(shí),我希望有在頁面加載時(shí)向數(shù)據(jù)庫獲取值來設(shè)置picker的默認(rèn)值。開始我使用官方文檔中的default-index屬性,并在onLoad方法中進(jìn)行this.setData()。但是這樣做picker的默認(rèn)索引還是0。
于是我又將setData放入onShow()、onReady()方法,均不奏效。(我真的不知道為什么,新建一個(gè)空白頁面測試也是這樣)
繼而我查看官方文檔,發(fā)現(xiàn)picker有實(shí)例方法setIndexes(),于是嘗試。
然而我在onLoad()、onReady()方法中通過selectComponent()后再調(diào)用方法,還是不奏效。
只有在onReady方法中才可以這樣設(shè)置索引
wxml:
<van-picker class="picker1" columns="{{columns}}" bind:change="onChange" />
js:(獲取到的數(shù)據(jù)為this.data.index)
onReady(){ const picker = this.selectComponent('.picker1') //獲取組件實(shí)例 picker.setIndexes([this.data.index]) //setIndexes()中的參數(shù)是一個(gè)數(shù)組 }
補(bǔ)充知識:項(xiàng)目總結(jié)之關(guān)于vue中使用mint-ui的mt-popup出現(xiàn)滾動穿透問題的解決總結(jié)
說實(shí)話,使用Mint-ui這個(gè)ui組件的過程中遇到了很多問題,這個(gè)ui組件問題真多。先說今天的主題吧,我在使用popup選擇框的時(shí)候和datepicker時(shí)間選擇器的時(shí)候出現(xiàn)了滾動穿透的問題,特別是在ios上面。
找了好多方法,最后同事給出了一個(gè)好的方法,很簡潔,于是就想著總結(jié)下來。
防止?jié)L動穿透 只需加入@touchmove.native.stop.prevent 阻止默認(rèn)根元素的默認(rèn)事件就可以了,native是關(guān)鍵,這個(gè)表示根元素的意思,也就是body或者h(yuǎn)tml
代碼如下:
Popup組件:
<mt-popup v-model="popupVisible" position="bottom"> ... </mt-popup> // 防止?jié)L動穿透 只需加入@touchmove.native.stop.prevent 阻止默認(rèn)根元素的默認(rèn)事件就可以了native是關(guān)鍵,這個(gè)表示根元素的意思,也就是body或者h(yuǎn)tml <mt-popup v-model="popupVisible" position="bottom" @touchmove.native.stop.prevent> ... </mt-popup>
注意當(dāng) mt-popup中還有div等子元素的時(shí)候,一定要注意,這個(gè)時(shí)候可能會有一些問題,會出現(xiàn)mt-popup這個(gè)元素也滾動不了的情況,所以說如果mt-popup本身不需要滾動的話,加了@touchmove.native.stop.prevent,底部頁面就不會跟著滑動,如果mt-popup里面有滾動條需要滾動的話,可能就滾動不了,這個(gè)時(shí)候需要采取常規(guī)方法了,如下:
// 解決方式,通過監(jiān)聽popupVisible變量,在彈窗出現(xiàn)后禁止body節(jié)點(diǎn)touchMove事件,彈窗消失后恢復(fù)body節(jié)點(diǎn)的touchMove事件
//html 如下 <mt-popup v-model="popupVisible" position="bottom"> ... </mt-popup>
// js 如下 const handler = function(e) { e.preventDefault(); } // vue實(shí)例內(nèi) watch: { popupVisible: function (val) { if(val) { document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false }); } else { document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false }); } } }
Datetime Picker:
<mt-datetime-picker ref="picker" type="time" v-model="pickerValue" @touchmove.native.stop.prevent> </mt-datetime-picker>
對于時(shí)間組件加了@touchmove.native.stop.prevent,選擇時(shí)間滾動的時(shí)候底部頁面就不會跟著滾動了,很完美。
@touchmove.native.stop.prevent可以使我們省好多事,用起來吧!
以上這篇Vant Weapp組件踩坑:picker的初始賦值解決就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目使用axios發(fā)送請求讓ajax請求頭部攜帶cookie的方法
今天小編就為大家分享一篇vue項(xiàng)目使用axios發(fā)送請求讓ajax請求頭部攜帶cookie的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)表格關(guān)鍵字篩選高亮,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05Vue3 + TypeScript 開發(fā)總結(jié)
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內(nèi)容,感興趣的話一起來看看吧2021-08-08使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽無效
Vue.js中的watch選項(xiàng)用于監(jiān)聽Vue實(shí)例上某個(gè)特定的數(shù)據(jù)變化,下面這篇文章主要給大家介紹了關(guān)于Vue3?Watch踩坑實(shí)戰(zhàn)之watch監(jiān)聽無效的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01