解决uni-app下拉选择框uni-data-select超出uni-card高度时选项不显示问题

最新推荐文章于 2024-09-02 11:57:24 发布
最新推荐文章于 2024-09-02 11:57:24 发布
阅读量715 收藏
点赞数 2
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/simple8973/article/details/140449966
版权

当uni-data-select放入uni-card中时，如果uni-card的高度不够高，就会出现选项展示不全的问题，如下图：

解决方式很简单，修改uni-card的样式，将uni-card里面自带的overflow: hidden;注释就完咯

simple8973
关注
专栏目录
下拉框数据被遮挡 且 后续数据无法下拉的 解决方法
码农研究僧的博客
06-11 1080
调整下拉框高度： 首先，检查下拉框的高度，确保它能够容纳所有的选项 下拉框的高度不够，可能会导致后面的数据无法滚动到可视区域 检查父级容器样式： 确保设备号下拉框及其后面的数据都位于一个可以滚动的容器中 可能父级容器的样式或者布局导致了滚动行为的异常
使用uniapp，uni-data-select组件时，内容长度没超过容器宽度时候虽然能显示全内容但是数据后边会出现三个点，逼死强迫症
小袁同学的学习日常
03-18 1130
使用uniapp，uni-data-select组件时，内容长度没超过容器宽度时候虽然能显示全内容但是数据后边会出现三个点，逼死强迫症
uniapp踩坑之下拉筛选高度
limuu09的博客
08-01 143
问题：当时有一个二级的类目筛选，时间赶就没做二级分类的下拉筛选，直接取所有二级分类，但是由于数量有100多个，就导致下拉列表无法滑动；解决：直接在使用该dropdown的父页面深度选择，高度可自行设置；
uni-data-select箭头不显示问题-已解决，uniapp图标不显示
nike的博客
08-11 1825
这时找到我们想要的图标就行了 ，我发现icons的名字改了，我想的箭头变成了 arrowup和arrowdown,既然找到了我们想要的图标，我就把select原来引入的icons改成我们现有的icons名字就好了。引用了uin-icons,这时去查看uni-icons的图标有哪些，查看你引入的uni-icons的原码。找到uni-data-select原码，找到如下位置的代码。图标不显示的问题，此时已经解决了！
uniapp中自带uni-select不显示箭头和清除问题 已解决
最新发布
wuxingwuyou的博客
09-02 401
uniapp中自带uni-select不显示箭头和清除问题 已解决
uniapp下拉框显示不全
qq_46615386的博客
11-16 1171
uni-data-select组件下拉内容显示不全
解决uni-data-select组件，选中后，不显示值的问题
qq_31552775的博客
11-21 1805
最近使用uniapp的uni-data-select组件,发现自定义选项选中后不显示text。
uni-data-select 选择框中选项过长问题
weixin_46489844的博客
06-11 746
修改显示框的内容width 可自由调整。修改选择部分 width 可自由调整。
【APP开发】uni-data-select真机下拉框不显示问题
weixin_43699770的博客
07-04 1708
我是对比了Hello uni-app中uni-data-select的写法，想到可能是这个原因。去掉最外层 class="container"之后就可以了，但具体原因不清楚。
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
"uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪"这个主题关注的是如何在移动应用中实现平滑的下拉加载功能，同时避免页面在加载新内容时出现闪烁现象，确保用户在查看聊天历史时能有流畅的交互体验。...
uni-app下拉框实现
12-18
uni-app下拉框实现，纯原生写法
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uni-app下拉实例模板
04-04
uni-app的点击下拉实例模板，非常好用，可以放心使用。
uni-app登录实例的实现
10-29
首先，我们需要在HBuilderX中新建一个uni-app项目，选择合适的模板或者从零开始创建。 在创建项目后，我们可以在`pages`目录下新建一个`login`页面，用于展示登录界面。这里可以使用uni-app的UI组件，如`<input>`...
uni-app：mescroll-nui下拉刷新组件
09-08
本知识点主要聚焦于uni-app中的mescroll-nui下拉刷新组件，这是一个非常实用的功能，用于实现用户在滚动到页面顶部时触发数据的刷新。 首先，mescroll-nui是基于MeScroll库的一个uni-app插件，MeScroll是一个高性能...
uniapp uni-popup里面使用uni-data-select不弹出选项值
m0_46483779的博客
08-15 1654
出现的问题其实就是元素的层级问题，uni-popup的层级把uni-data-select给覆盖掉了。
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 9123
uni-app——下拉框多选
zxz-uni-data-select插件，表单回显时，无法显示数据，原因是后端返回的数据是字符串，要把这个字符串转成number类型，就能显示了
Frank_colo的博客
01-20 1231
zxz-uni-data-select插件，uniapp项目，vue3。用Number()方法把字符串转成number。string转成number 回显就能显示了。表单回显时，这个下拉框不能显示数据。
uni-data-select下拉框溢出隐藏
05-10
要实现下拉框溢出隐藏的效果，可以通过CSS的overflow和max-height属性来实现。具体实现步骤如下： 1. 给下拉框的父元素添加一个固定高度和overflow:hidden的样式，比如： ```css .uni-data-select { height: 40px; overflow: hidden; } ``` 2. 给下拉框添加一个max-height属性，比如： ```css .uni-data-select .dropdown-menu { max-height: 200px; overflow-y: auto; } ``` 这里的max-height值可以根据实际情况进行调整，overflow-y:auto可以让下拉框内容超出部分出现滚动条。 3. 当下拉框打开时，将其父元素的overflow属性设置为visible，比如： ```css .uni-data-select.show { overflow: visible; } ``` 这样就可以实现下拉框溢出隐藏的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

simple8973

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值