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>

看出来不同之处了吧,相比大家都明白为什么了。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vant Picker是一个可以滚动选择的下拉列表组件,类似于Select下拉列表。在Vant文档中,虽然没有提供直接的API来实现搜索功能,但可以通过手动实现来实现搜索功能。一个思路是添加一个搜索框,并对搜索框的数据进行双向绑定。然后使用Vue的watch来监听数据的变化,每次数据更新后,可以使用匹配规则对请求接口返回的数据列表进行筛选,并将筛选后的数据列表绑定给Picker组件,从而实现搜索功能。这个功能不需要请求后端接口,可以直接在前端进行处理。 官方文档中可能并未提供详细的实现方法,但通过仔细阅读文档、方法和类型的说明,可以找到相关内容。此外,度娘也可能无法直接提供相关信息,因此可能需要花费一些时间进行试错和解决问题。你可以参考官方文档和尝试不同的方法和参数来实现vant picker的搜索功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【每天学一点-05】在Vue中使用Vant组件-picker选择器,并给选择器添加搜索功能](https://blog.csdn.net/weixin_43906233/article/details/125943267)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vant picker 多级联动操作](https://download.csdn.net/download/weixin_38731979/14693049)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值