vant的picker的坑及解决
更新时间:2022年12月05日 10:11:12 作者:玲珑咖啡
这篇文章主要介绍了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 },
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue.js使用this.$confirm换行显示提示信息实例
在编写Web应用时,实现多行文本显示通常需要用到HTML标签或JavaScript特定函数,本文介绍了如何使用JavaScript的$createElement函数来创建多行文本显示,$createElement可以创建任何HTML标签,使得在JavaScript中控制HTML输出更加灵活,通过简单的代码示例2024-10-10详解vue中$nextTick和$forceUpdate的用法
这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-12-12ant-design-vue中设置Table每页显示的条目数量方式
这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10
最新评论