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

最新推荐文章于 2024-05-23 14:28:21 发布
最新推荐文章于 2024-05-23 14:28:21 发布
阅读量1.2k 收藏
点赞数
分类专栏： 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…

孟孟~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于小程序引用Vant中下拉菜单DropdownMenu的遮罩层Bug
qq_47608978的博客
07-25 4094
写在前面 做了一个原生小程序项目，设计图是将一个筛选放在了整个页面的中间，当然为了方便我选择了引用组件，查看了一下比较主流的小程序组件，发现Vant比较适合我的需求，于是就引用了Vant，怎么引用这里不做详细说明，接下来说一下遇到的问题，以及本人的新路历程和解决方法。 发现Bug 在引用Vant组件一直到看官方示例文档，期间都很顺利，实现效果也很满意，就当我以为这个问题即将结束的时候，新的问题出现了。下拉菜单放到中间位置，上方没有遮罩，这个时候滑动上方的部分，整个内容都会跟着滚动，然而我们引用的下拉菜
van-picker选择器空白
m0_56860427的博客
08-19 1718
van-picker绑定的数据实在store里，在store里数据格式也是正确的，但是到页面里picker的选择项就是全空白， 在该路由中将该组件的keepalive设为了true,所以从别的页面回来的时候，picker绑定的数据不会重新获取，而该组件在初始的created里将picker的数据项写为了空数组，此时只需要在activated生命周期里重新给picker绑定的数据重新进行取值操作即可。 ...
vant下拉选择框（单选、多选）
最新发布
weixin_56539583的博客
05-23 864
【代码】vant下拉选择框（单选、多选）
关于手机键盘遮挡picker问题
bigboy1010的博客
05-29 790
如图所示，当输入完手机号时，点击下面的picker的input输入框，就会出现键盘遮挡picker的问题，input的disable已经设置为true ，有没有好多解决遮挡的方法， 没办法就只能先写地址，后写电话了
vant tabbar刷新问题，遮盖内容问题（vant遇到的坑）
m0_62648436的博客
10-13 1036
vant tabbar刷新问题，遮盖内容问题（vant遇到的坑）
vue中使用vant-ui的popup＞picker组件在ios中出现底部弹出层高度丢失问题
weixin_44949860的博客
08-06 2245
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" @
Vant_Picker_选择器(搭配弹出层使用)
骑大马挎大刀
01-17 3335
生成0到100之间[0,100)的随机int值 // 与当前线程隔离,一个线程获得的随机数不受另一个线程的影响 ThreadLocalRandom.current().nextInt(0,100); //全局提供随机数 Random random = new Random(); random.nextInt(100);
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
react-native-picker-cascader：在Android和IOS本机中开发的Picker select级联器下拉列表
02-03
React本机选择器级联器安装npm install --save react-native-picker-cascader如何使用import PickerCascader from 'react-native-picker-cascader';<PickerCascader style={{ padding: 10 }} data={[ { key: '1',...
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
该库公开了一个跨平台的界面，用于显示模式内部的本机日期选择器和时间选择器，从而提供统一的用户和开发人员体验。 在后台，该库使用 。 设置（适用于非EXPO项目） 如果您的项目未使用 ，请使用npm或yarn安装库...
react-day-picker：React的轻量级日期选择器组件
02-03
React日选择器 轻量级日期选择器组件。...在卡住？ v8即将到来！ 下一个版本将是TypeScript中的重写。 阅读更多或关注。 适用于即将发布的v8版本。 发送v7版本的PR。 有关更多详细信息，请参见 。
小程序 vant-piker或则vant-area不显示标题和确认取消按钮
fdyputi的博客
05-20 3835
使用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 1367
vant Picker组件踩坑
vera的博客
09-09 4475
如图 因需求要求，picker去掉顶部栏，点击下方确认按钮的时候获取选中的值 方法一：绑定change事件，选项改变时触发（但是有1s的延迟，操作太快了会取不到值，不可取） <van-picker :show-toolbar="true" :columns="reason" ref="picker" @change="change" /> <div class="btn" @click="handlePopSubmit('reason')"&g
vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据
热门推荐
qq_51055690的博客
10-26 1万+
vantUI van-picker column
使用vant踩过的那些坑--待补充
仙姑不仙的博客
11-29 774
1. ios无法调用Picker 有个表单需要输入号码，所以选择使用picker+NumberKeyboard结合来做，但在使用过程中，发现ios中有的系统版本调用不了Picker，就是Picker选择器无法弹出，查了很多资料，都说是dom的节点载入位置有问题，后来改了之后发现没用，最后的解决办法就是调用系统的数字键盘，这个最保险了。 <van-field type="tel"></van-field> ...
解决vant-popup在有滚动条的页面，弹出遮罩层时页面会滚动到顶部
lucky_ax的博客
10-15 7626
记录一下,使用vant-popup弹出层时,弹出遮罩层时页面会滚动到最顶部 使用代码 代码 <van-popup v-model="Picker_chufen" position="bottom"> <van-picker show-toolbar item-height="35px" :columns="columns_chufe
vant 级联选择器 tbody高度滑动
yusun1234的博客
03-30 709
啊
van-picker案例
04-29
Van-Picker是一个面向消费者的在线购物平台，专注于为用户提供个性化、定制化的购物体验。Van-Picker的主要特点是为用户提供定制化的商品推荐和智能化的购物助手，使用户能够更轻松地找到自己喜欢的商品，并且节省时间和精力。 Van-Picker的技术架构主要包括以下几个方面： 1. 数据采集和处理：Van-Picker通过网络爬虫和API接口获取商品和用户数据，通过数据清洗和预处理，将数据转化为可用的格式。 2. 数据分析和建模：Van-Picker利用机器学习算法和深度学习模型对用户和商品数据进行分析和建模，以提供个性化的商品推荐和购物助手功能。 3. 服务端开发：Van-Picker采用Python和Django框架进行服务端开发，实现用户注册、登录、购物车管理、订单管理等功能。 4. 前端开发：Van-Picker采用Vue.js框架进行前端开发，实现商品展示、搜索、筛选、购买等功能。 5. 数据库和缓存：Van-Picker采用MySQL作为主数据库，Redis作为缓存数据库，以提升系统的性能和可扩展性。 总体来说，Van-Picker的技术架构是比较先进和完整的，充分利用了机器学习和深度学习等技术，提供了个性化和智能化的购物体验，为用户节省了时间和精力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值