Vant Weapp元件踩坑:picker的初始賦值解決
在使用vant的picker元件時,我希望有在頁面載入時向資料庫獲取值來設定picker的預設值。開始我使用官方文件中的default-index屬性,並在onLoad方法中進行this.setData()。但是這樣做picker的預設索引還是0。
於是我又將setData放入onShow()、onReady()方法,均不奏效。(我真的不知道為什麼,新建一個空白頁面測試也是這樣)
繼而我檢視官方文件,發現picker有例項方法setIndexes(),於是嘗試。
然而我在onLoad()、onReady()方法中通過selectComponent()後再呼叫方法,還是不奏效。
只有在onReady方法中才可以這樣設定索引
wxml:
<van-picker class="picker1" columns="{{columns}}" bind:change="onChange" />
js:(獲取到的資料為this.data.index)
onReady(){ const picker = this.selectComponent('.picker1') //獲取元件例項 picker.setIndexes([this.data.index]) //setIndexes()中的引數是一個數組 }
補充知識:專案總結之關於vue中使用mint-ui的mt-popup出現滾動穿透問題的解決總結
說實話,使用Mint-ui這個ui元件的過程中遇到了很多問題,這個ui元件問題真多。先說今天的主題吧,我在使用popup選擇框的時候和datepicker時間選擇器的時候出現了滾動穿透的問題,特別是在ios上面。
找了好多方法,最後同事給出了一個好的方法,很簡潔,於是就想著總結下來。
防止滾動穿透 只需加入@touchmove.native.stop.prevent 阻止預設根元素的預設事件就可以了,native是關鍵,這個表示根元素的意思,也就是body或者html
程式碼如下:
Popup元件:
<mt-popup v-model="popupVisible" position="bottom"> ... </mt-popup> // 防止滾動穿透 只需加入@touchmove.native.stop.prevent 阻止預設根元素的預設事件就可以了native是關鍵,這個表示根元素的意思,也就是body或者html <mt-popup v-model="popupVisible" position="bottom" @touchmove.native.stop.prevent> ... </mt-popup>
注意當 mt-popup中還有div等子元素的時候,一定要注意,這個時候可能會有一些問題,會出現mt-popup這個元素也滾動不了的情況,所以說如果mt-popup本身不需要滾動的話,加了@touchmove.native.stop.prevent,底部頁面就不會跟著滑動,如果mt-popup裡面有滾動條需要滾動的話,可能就滾動不了,這個時候需要採取常規方法了,如下:
// 解決方式,通過監聽popupVisible變數,在彈窗出現後禁止body節點touchMove事件,彈窗消失後恢復body節點的touchMove事件
//html 如下 <mt-popup v-model="popupVisible" position="bottom"> ... </mt-popup>
// js 如下 const handler = function(e) { e.preventDefault(); } // vue例項內 watch: { popupVisible: function (val) { if(val) { document.getElementsByTagName('body')[0].addEventListener('touchmove',this.handler,{ passive: false }); } else { document.getElementsByTagName('body')[0].removeEventListener('touchmove',{ passive: false }); } } }
Datetime Picker:
<mt-datetime-picker ref="picker" type="time" v-model="pickerValue" @touchmove.native.stop.prevent> </mt-datetime-picker>
對於時間元件加了@touchmove.native.stop.prevent,選擇時間滾動的時候底部頁面就不會跟著滾動了,很完美。
@touchmove.native.stop.prevent可以使我們省好多事,用起來吧!
以上這篇Vant Weapp元件踩坑:picker的初始賦值解決就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。