van-picker下拉列表浮动在顶层，遮挡其他界面

最新推荐文章于 2024-04-09 17:29:46 发布
最新推荐文章于 2024-04-09 17:29:46 发布
阅读量1.3k 收藏
点赞数
分类专栏： vant van-picker弹出下拉框挡住界面 wan-field下拉选择挡住界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37471721/article/details/107682638
版权

由于近期项目采用了Vant作为移动端UI组件库,在使用van-picker时遇到问题，整理记录下来，方便自己及他人。
代码如下：
在这里插入图片描述

期望的效果
在这里插入图片描述
实际效果
在这里插入图片描述
可以看出每次点击选择“维护计划”的时候，总是会弹出一个列表层，遮挡住我要选择的界面，令人费解。

解决办法：
需要给van-field增加readonly属性。

最终代码：
在这里插入图片描述
ending…

孟孟~
关注
专栏目录
关于小程序引用Vant中下拉菜单DropdownMenu的遮罩层Bug
qq_47608978的博客
07-25 4188
写在前面 做了一个原生小程序项目，设计图是将一个筛选放在了整个页面的中间，当然为了方便我选择了引用组件，查看了一下比较主流的小程序组件，发现Vant比较适合我的需求，于是就引用了Vant，怎么引用这里不做详细说明，接下来说一下遇到的问题，以及本人的新路历程和解决方法。 发现Bug 在引用Vant组件一直到看官方示例文档，期间都很顺利，实现效果也很满意，就当我以为这个问题即将结束的时候，新的问题出现了。下拉菜单放到中间位置，上方没有遮罩，这个时候滑动上方的部分，整个内容都会跟着滚动，然而我们引用的下拉菜
在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用
weixin_39568172的博客
12-22 1964
一开始看到van-picker的多列联动的例子时，脑子是懵逼的，我即将要用的数据不可能这么简单啊，这叫我咋用！然后一顿苦思冥想，再深读文档内极其稀少的信息，最后在多次尝试后，终于把结果试出来了。没错，真的是试出来的。心累。。。show-toolbartitle="请选择小区名称":columns="columns"value-key="name" //选项对象中，文字对应的 key@co...
关于手机键盘遮挡picker问题
bigboy1010的博客
05-29 818
如图所示，当输入完手机号时，点击下面的picker的input输入框，就会出现键盘遮挡picker的问题，input的disable已经设置为true ，有没有好多解决遮挡的方法， 没办法就只能先写地址，后写电话了
vant tabbar刷新问题，遮盖内容问题（vant遇到的坑）
m0_62648436的博客
10-13 1093
vant tabbar刷新问题，遮盖内容问题（vant遇到的坑）
van-picker选择器空白
m0_56860427的博客
08-19 1792
van-picker绑定的数据实在store里，在store里数据格式也是正确的，但是到页面里picker的选择项就是全空白， 在该路由中将该组件的keepalive设为了true,所以从别的页面回来的时候，picker绑定的数据不会重新获取，而该组件在初始的created里将picker的数据项写为了空数组，此时只需要在activated生命周期里重新给picker绑定的数据重新进行取值操作即可。 ...
vue中使用vant-ui的popup＞picker组件在ios中出现底部弹出层高度丢失问题
weixin_44949860的博客
08-06 2277
vue中使用vant-ui的popup>picker组件在ios中出现底部弹出层高度丢失问题 <van-popup v-if="isShow" v-model="xxx" position="bottom" :overlay="true" :close-on-click-overlay="true" get-container="#(挂载页面的id)" > <van-picker show-toolbar :columns="columns" @cancel="onCancel" @
van 自定义组件_vue移动端两列选择器van-picker，自定义数据及改造确定按钮
weixin_39760295的博客
12-19 2653
【更新】往往UI给的设计稿和我们找到的组件库是有出入的，比方说人家是两列，设计给出三列；人家显示五行，设计偏要显示三行；人家有确定和取消按钮，且左右对齐，设计非要把取消按钮拿掉，且要求确定居中！如下图：我们能怎么办，只能根据UI设计稿改呗！改造代码如下：:columns="columns":visible-item-count='3'@change="handleChange"/>请选择正确...
van-field+van-picker实现过滤和模糊搜索
玛已的小空间
05-30 5250
使用van-picker + van-search 实现模糊搜索和过滤选择器，加上van-field封装成定制化的选择器组件
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
该库公开了一个跨平台的界面，用于显示模式内部的本机日期选择器和时间选择器，从而提供统一的用户和开发人员体验。 在后台，该库使用 。 设置（适用于非EXPO项目） 如果您的项目未使用 ，请使用npm或yarn安装库...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
Vant选择器不隐藏
jtfyh的博客
06-16 325
今次遇到vant选择器不隐藏 原因:没加载弹出层组件
Vant DropdownMenu 下拉菜单带搜索功能
weixin_43829905的博客
04-09 1506
Vant DropdownMenu 下拉菜单带搜索功能
基于vant UI设计一个下拉选择跟搜索功能的组件
Kepler_明的博客
06-16 6570
基于vant UI设计一个下拉选择跟搜索功能的组件
vant下拉多选
weixin_44213308的博客
01-18 2367
<template> <div class="dh-field "> <div class="van-hairline--bottom"> <van-field v-model="resultLabel" v-bind="$attrs" readonly :is-link="$attrs.disabled === undefined" error-message.
van-picker下拉框添加搜索和分页功能
月兒~圓
04-19 1854
以下为 在data()方法中设置要传的值。
vant picker选择器组件增加search搜索功能
一只爱吃糖的小羊
10-14 7574
[vant](https://vant-contrib.gitee.io/vant/#/zh-CN/picker)用在移动端的小项目还是挺合适的，但也有一些不符合需求的地方，比如它的picker选择器有个问题，就是没有搜索功能。 其实或许可以自己组合：比如把picker与IndexBar 索引栏结合起来，或者把picker与search搜索功能组合。 我用的是第二种方法：在picker上面加个搜索框，不过我用的van-field。
Vant_Picker_选择器(搭配弹出层使用)
骑大马挎大刀
01-17 3420
生成0到100之间[0,100)的随机int值 // 与当前线程隔离,一个线程获得的随机数不受另一个线程的影响 ThreadLocalRandom.current().nextInt(0,100); //全局提供随机数 Random random = new Random(); random.nextInt(100);
小程序 vant-piker或则vant-area不显示标题和确认取消按钮
fdyputi的博客
05-20 4003
使用vant-picker或vant-area时，有时候会无法显示取消和确认按钮 代码及截图如下： <van-popup show="{{showAddress}}" position="bottom" custom-style="height:42%" bind:click-overlay="closeAddress" > <van-picker
vant picker 再手机上太小了 不要试图去修改样式 直接修改属性即可
Mrswater的博客
04-02 1447
vant4 van-picker多选
最新发布
09-10
在van-picker的多选模式下，用户可以选择一个范围的日期或时间，例如选择一段时间内的所有工作日或者特定时间段。 要使用van-picker实现多选功能，你需要在Vue模板中设置`mode`属性为'multi', 然后可以配置开始和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值