Vant Weapp 구성 요소 구덩이 밟기:picker의 초기 할당 해결

vant의picker 구성 요소를 사용할 때, 페이지에 불러올 때 데이터베이스에 값을 가져와picker의 기본값을 설정하기를 원합니다.공식 문서의 default-index 속성을 사용하고 onLoad 방법에서this를 진행합니다.setData().그러나 이렇게 하면 picker의 기본 인덱스는 0입니다.
그래서 나는 setData를 onShow(), onReady() 방법에 넣었는데 모두 효과가 없었다.(왜 그런지 모르겠어요. 새 공백 페이지 테스트도 그렇습니다)
이어서 나는 공식 문서를 보았는데 픽커가 실례적인 방법인 set Indexes () 를 발견하고 시도했다.
그러나 나는 onLoad (), onReady () 방법에서 selectComponent () 를 통과한 후에 방법을 호출했지만 효과가 없었다.
onReady 방법에서만 이렇게 인덱스를 설정할 수 있습니다.
wxml:

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 구성 요소는 문제가 정말 많습니다.오늘의 주제를 먼저 말씀드리겠습니다. 제가 팝업 선택 상자를 사용할 때와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', this.handler, { 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의 초기 값 부여 해결은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분에게 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.

Vant Weapp 구성 요소 구덩이 밟기:picker의 초기 할당 해결

좋은 웹페이지 즐겨찾기