vant的picker的坑及解決

更新時(shí)間：2022年12月05日 10:11:12 作者：玲瓏咖啡

這篇文章主要介紹了vant的picker的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant的picker的坑

<view class="picker" bindtap="goSub">
	{{subjectname}}
	<image class="img" src="../../images/bottom-arrow-pic.png"></image>
	<!-- 年級(jí)篩選 -->
	<van-popup show="{{ subShow }}" bind:close="subClose" position="bottom" overlay-style="background:rgba(0,0,0,0.3)">
		<van-picker columns="{{ subColumns }}" bind:cancel="subCancel" bind:confirm="subConfirm" show-toolbar value-key="name"
		 toolbar-class="cancon" />
	</van-popup>
</view>

咋一看上面的代碼貌似沒(méi)有什么問(wèn)題，但是點(diǎn)擊picker出來(lái)之后會(huì)發(fā)現(xiàn)，關(guān)閉不了了，無(wú)論怎么點(diǎn)都不會(huì)關(guān)閉彈出層，頁(yè)面也無(wú)報(bào)錯(cuò)信息，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，組件寫(xiě)錯(cuò)地方了

下面是正確的寫(xiě)法

<view class="picker" bindtap="goSub">
?? ?{{subjectname}}
?? ?<image class="img" src="../../images/bottom-arrow-pic.png"></image>
</view>
<!-- 年級(jí)篩選 -->
<van-popup show="{{ subShow }}" bind:close="subClose" position="bottom" overlay-style="background:rgba(0,0,0,0.3)">
?? ?<van-picker columns="{{ subColumns }}" bind:cancel="subCancel" bind:confirm="subConfirm" show-toolbar value-key="name"
?? ? toolbar-class="cancon" />
</van-popup>

看出來(lái)不同之處了吧，相比大家都明白為什么了。

vant-picker級(jí)聯(lián)問(wèn)題

級(jí)聯(lián)時(shí)主要注意一級(jí)二級(jí)之間的聯(lián)動(dòng)，需要一個(gè)方法處理，其他的跟單列的相同

<div class="content">
    <div @click="openPicker()">{{pickerValue}}</div>
    <van-popover v-model="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        show-toolbar
        :default-index="defaultIndex"
        @confirm="setData"
        @cancel="showPicker = false"
      ></van-picker>
    </van-popover>
  </div>

showPicker:false,
      defaultIndex:0,
      pickerValue0:'浙江',
      pickerValue:'溫州',
      columns: [{
        text: '浙江',
        defaultIndex:NaN,
        children: [{
          text: '杭州',
          defaultIndex:NaN
        }, {
          text: '溫州',
          defaultIndex:NaN
        }]
      }, {
        text: '福建',
        defaultIndex:NaN,
        children: [{
          text: '福州',
          defaultIndex:NaN
        }, {
          text: '廈門(mén)',
          defaultIndex:NaN
        }]
      }]

 openPicker(){
    //  打開(kāi)篩選框的默認(rèn)值
     this.columns.map((item,index)=>{
       if(this.pickerValue0===item.text){
         this.defaultIndex = parseInt(index)
         for(let i =0 ;i<item.children.length;i++){
           if(this.pickerValue === item.children[i].text){
             item.defaultIndex = parseInt(i)
           }
         }  
       }
     })
     console.log(this.columns);
     this.showPicker = true
   },