在使用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)滾動(dòng)穿透問題的解決總結(jié)

說實(shí)話，使用Mint-ui這個(gè)ui組件的過程中遇到了很多問題，這個(gè)ui組件問題真多。先說今天的主題吧，我在使用popup選擇框的時(shí)候和datepicker時(shí)間選擇器的時(shí)候出現(xiàn)了滾動(dòng)穿透的問題，特別是在ios上面。

找了好多方法，最后同事給出了一個(gè)好的方法，很簡潔，于是就想著總結(jié)下來。

防止?jié)L動(dòng)穿透 只需加入@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動(dòng)穿透 只需加入@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è)元素也滾動(dòng)不了的情況，所以說如果mt-popup本身不需要滾動(dòng)的話，加了@touchmove.native.stop.prevent，底部頁面就不會跟著滑動(dòng)，如果mt-popup里面有滾動(dòng)條需要滾動(dòng)的話，可能就滾動(dòng)不了，這個(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í)間滾動(dòng)的時(shí)候底部頁面就不會跟著滾動(dòng)了，很完美。

@touchmove.native.stop.prevent可以使我們省好多事，用起來吧！

以上這篇Vant Weapp組件踩坑:picker的初始賦值解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論