vant的picker的坑及解决
作者：玲珑咖啡
这篇文章主要介绍了vant的picker的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vant的picker的坑
<view class="picker" bindtap="goSub">
{{subjectname}}
<image class="img" src="../../images/bottom-arrow-pic.png"></image>
<!-- 年级筛选 -->
<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>咋一看上面的代码貌似没有什么问题，但是点击picker出来之后会发现，关闭不了了，无论怎么点都不会关闭弹出层，页面也无报错信息，经过测试发现，组件写错地方了
下面是正确的写法
<view class="picker" bindtap="goSub">
{{subjectname}}
<image class="img" src="../../images/bottom-arrow-pic.png"></image>
</view>
<!-- 年级筛选 -->
<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>看出来不同之处了吧，相比大家都明白为什么了。
vant-picker级联问题
级联时主要注意一级二级之间的联动，需要一个方法处理，其他的跟单列的相同
<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: '厦门',
defaultIndex:NaN
}]
}] openPicker(){
// 打开筛选框的默认值
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
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。