Vant Weapp Component Treading Pit: Solution of picker Initial Assignment

When using the picker component of vant, I want to get the value from the database when the page loads to set the default value of picker. I started by using the default-index attribute in the official documentation and doing this. setData () in the onLoad method. But by doing so, the default index of picker is still 0.

So I put setData into onShow () and onReady () methods, which didn't work. (I really don't know why, but the same is true for a new blank page test.)

Then I looked at the official documentation and found that picker had an instance method setIndexes (), so I tried.

However, I call the method after passing selectComponent () in onLoad (), onReady () methods, and it still doesn't work.

You can set the index in this way only in the onReady method

wxml:

< van-picker class="picker1" columns="{{columns}}" bind:change="onChange" / >

js: (The data obtained is this. data. index)

onReady(){
 const picker = this.selectComponent('.picker1') // Getting Component Instances 
 picker.setIndexes([this.data.index]) //setIndexes() The parameter in is 1 Array of numbers 
}

Supplementary knowledge: Summary of project summary on solving the rolling penetration problem of mt-popup using mint-ui in vue

To be honest, there are a lot of problems with the Mint-ui ui component, and there are a lot of problems with the ui component. Let's start with today's topic. I have scroll penetration problems when using popup selection box and datepicker time selector, especially on ios.

I found a lot of methods, and finally my colleagues gave a good method, which was very concise, so I thought about summarizing it.

To prevent scroll penetration, just add @ touchmove. native. stop. prevent to block the default event of the default root element. native is the key, which means the root element, that is, body or html

The code is as follows:

Popup components:

<mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
  </mt-popup>
  //  Prevent rolling penetration   Just join @touchmove.native.stop.prevent  Just block the default event of the default root element native Is the key, which means the root element, which is body Or html
  <mt-popup
   v-model="popupVisible"
   position="bottom"
   @touchmove.native.stop.prevent>
   ...
  </mt-popup>

Note that when there are child elements such as div in mt-popup, 1 Be sure to note that there may be some problems at this time, and the element mt-popup cannot be scrolled. Therefore, if mt-popup itself does not need to be scrolled, the bottom page will not slide if @ touchmove.native.stop.prevent is added. If there is a scroll bar in mt-popup, it may not be scrolled. At this time, it is necessary to adopt conventional methods, as follows:

//Solution: By listening to the popupVisible variable, the touchMove event of the body node is prohibited after the pop-up window appears, and the touchMove event of the body node is restored after the pop-up window disappears

 //html  As follows 
   <mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
   </mt-popup>

  // js  As follows 
  const handler = function(e) {
    e.preventDefault();
  }
  
  // vue Within an instance 
  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>

With @ touchmove.native.stop.prevent added to the time component, the bottom page will not scroll when selecting time scrolling, which is perfect.

@ touchmove.native.stop.prevent can save us a lot of things. Use it!