SoFunction
Updated on 2025-04-03

Vant's picker pit and solution

vant picker's pit

<view class="picker" bindtap="goSub">
	{{subjectname}}
	<image class="img" src="../../images/"></image>
	<!-- Grade filter -->
	<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>

At first glance, the code above seems to be fine, but after clicking picker, you will find that it cannot be closed. No matter how you click, the pop-up layer will not be closed, and the page will not report any error information. After testing, it was found that the component was written incorrectly.

Here is the correct way to write it

<view class="picker" bindtap="goSub">
    {{subjectname}}
    <image class="img" src="../../images/"></image>
</view>
<!-- Grade filter -->
<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>

You can see the difference, and everyone understands why.

vant-picker cascade problem

When cascading, it mainly pays attention to the linkage between first and second levels. One method is required to handle it, and the other ones are the same as those in a single column.

<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:'Zhejiang',
      pickerValue:'Wenzhou',
      columns: [{
        text: 'Zhejiang',
        defaultIndex:NaN,
        children: [{
          text: 'Hangzhou',
          defaultIndex:NaN
        }, {
          text: 'Wenzhou',
          defaultIndex:NaN
        }]
      }, {
        text: 'Fujian',
        defaultIndex:NaN,
        children: [{
          text: 'Fuzhou',
          defaultIndex:NaN
        }, {
          text: 'Xiamen',
          defaultIndex:NaN
        }]
      }]
 openPicker(){
    // Open the default value of the filter box     ((item,index)=&gt;{
       if(this.pickerValue0===){
          = parseInt(index)
         for(let i =0 ;i&lt;;i++){
           if( === [i].text){
              = parseInt(i)
           }
         }  
       }
     })
     ();
      = true
   },

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.