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 },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。