当前位置: 首页 > news >正文

下拉框数据被遮挡 且 后续数据无法下拉的 解决方法

目录

  • 前言
  • 1. 问题所示
  • 2. 原理分析
  • 3. 解决方法
    • 3.1 添加空白版
    • 2.2 调整z-index
    • 2.3 父容器的溢出属性
    • 2.4 调整样式属性
  • 4. 效果图

前言

小程序使用的是Uniapp,原理都差不多,索性标题就不标注Uniapp(小程序)

对于该问题调试了一个晚上,最终解决,对此记录下来

1. 问题所示

执行下拉框搜索的时候
有如下问题

  1. 下拉框高度不够,一直显示只有两行的数据显示
  2. 之后的数据无法下滑选择,滑不出来

但是数据输出是有的,反而出现如上两个问题

在这里插入图片描述

2. 原理分析

根据问题的提示和最后的解决方法:

  • 调整下拉框高度: 首先,检查下拉框的高度,确保它能够容纳所有的选项
    下拉框的高度不够,可能会导致后面的数据无法滚动到可视区域

  • 检查父级容器样式: 确保设备号下拉框及其后面的数据都位于一个可以滚动的容器中
    可能父级容器的样式或者布局导致了滚动行为的异常

其他的解决方式也可看看:

  • 添加滚动条::下拉框的选项过多,可以考虑添加垂直滚动条,以便用户能够滚动查看所有的选项

  • 检查数据渲染逻辑:确保后面的数据都已经

http://www.lryc.cn/news/374650.html

相关文章:

  • 课设--学生成绩管理系统(二)
  • STM32CubeMX配置-外部中断配置
  • 基于Vue的日程排班表 - common-schedule
  • SmartEDA、Multisim、Proteus大比拼:电路设计王者之争?
  • 【教资科一传统文化】文化素养传统文化之神话传说、天文历法、古代称谓、中国传统节日、成语典故
  • Apache Pulsar 从入门到精通
  • [Bug]使用duckduckgo的duckduckgo_search API搜索图片出现了错误
  • 线程池若干问题
  • k8s+RabbitMQ单机部署
  • github.com/therecipe/qt windows中安装
  • LogicFlow 学习笔记——11. 对齐线 和 键盘快捷键
  • FastWeb - Lua开源跨平台网站开发服务
  • 原子阿波罗STM32F767程序的控制器改为STM32F407驱动LCD屏
  • 04-jQuery工具函数及 jQuery 插件
  • 基于Python的花卉识别分类系统【W9】
  • Visual Studio Code 配置教程,手把手教你如何配置
  • 教案:Horovod v0.2 介绍与使用
  • 深入探索Spring Boot:原理与实践
  • 基于SSM框架的电影院售票网站
  • oracle发送http请求
  • 软件回归测试:策略及案例分析
  • openstack搭建
  • HIVE及SparkSQL优化经验
  • Django 5 Web应用开发实战
  • 互联网摸鱼日报(2024-06-17)
  • Docker Desktop Installer For Windows 国内下载地址
  • 做好程序前设计
  • SpringCloud:Feign远程调用
  • leetcode-05-[242]有效的字母异位词[349]两个数组的交集[202]快乐数[1]两数之和
  • C语言实现动态栈