随后记: uniapp uview u-dropdown 下拉菜单固定高度滑动不生效

使用u-dropdown 下拉组件 按照uview官网讲解使用 配置根本不生效

scroll-y="true" style="height: 200rpx;"

但是在下拉的时候,不能上下滑动 ,原因是自带的遮罩层挡住了


 

解决办法:在下拉菜单打开和关闭的时候,分别处理显示和隐藏遮罩层,并且单独给item高度
请参考:
重点:u-dropdown-item  单独给height  添加打开关闭事件,处理遮罩层显示影响,添加穿透样式

				<u-dropdown class="dropdown" :class="{'dis-none': !dropdownOpen}" @open="openDrops" @close="closeDrops">
					<u-dropdown-item height='400' v-model="selectFollow" :title="title" :options="optionsList" @change="changeSelectFollow"></u-dropdown-item>
					<u-dropdown-item height='400' v-model="selectStatus" :title="statusTitle" :options="statusList" @change="changeSelectStatus"></u-dropdown-item>
				</u-dropdown>


		openDrops(e) {
			this.dropdownOpen = true;
		},
		// 关闭筛选下拉
		closeDrops(e) {
			this.dropdownOpen = false;
		},
	.dis-none{
		::v-deep .u-dropdown__content{
			display: none;
		}
	}



 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/672695.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

英语四级翻译练习笔记②——大学英语四级考试2023年12月真题(第二套)

目录 引言&#xff08;必看&#xff09; 四级翻译评分标准分析及真题解析 四级翻译评分标准 四级翻译真题 学生作答 错误标注 标准满分答案 提高翻译水平的建议 引言&#xff08;必看&#xff09; 这是一篇英语四级翻译的练习的专栏&#xff0c;如果相信我的话就将这…

树莓派5烧系统和ssh远程实现

1、硬件说明 树莓派5 64G micro SD卡读卡器 2、烧录系统过程记录 之前写过一篇pi4B烧录Ubuntu22.04的博客&#xff0c;这篇就简单记录备份下 2.1 去ubuntu官网在树莓派上安装Ubuntu | Ubuntu下载Ubuntu 桌面 24.04 LTS 我之前已经下好了就有个(1) 2.2 用读卡器把SD卡插到…

车辆前向碰撞预警系统性能要求和测试规程

前言 本文整理《GB/T 33577-2017 智能运输系统-车辆前向碰撞预警系统性能要求和测试规程》国标文件关键信息,FCW系统性能和测试右给深层次的认识。 术语和定义 车辆前向碰撞预警系统 forward vehicle collision warning system自车 subject vehicle(SV)目标车辆 target ve…

Lagrange ZK Coprocessor:革新区块链领域的大数据应用

1. 引言 2024年5月11日&#xff0c;Lagrange Labs宣称获得由Founders Fund领投&#xff08;Archetype Ventures, 1kx, Maven11, Fenbushi Capital, Volt Capital, CMT Digital, Mantle Ecosystem Fund和其它天使投资人跟头&#xff09;的1320万美金种子轮融资&#xff0c;致力于…

【spring】第一篇 IOC和DI入门案例

Spring到底是如何来实现IOC和DI的&#xff0c;那接下来就通过一些简单的入门案例&#xff0c;来演示下具体实现过程。 目录 前期准备 一、IOC入门案例 思路分析 代码实现 二、DI入门案例 思路分析 代码实现 总结 前期准备 使用IDEA创建Maven项目&#xff0c;首先需要配…

linux进阶的一些操作以及知识点------习题集(实践)

请创建以你姓名全拼的用户luwenhua&#xff0c;将其设置为免密登录&#xff0c;切换到luwenhua用户&#xff0c;打开终端&#xff0c;完成以下操作 &#xff08;一&#xff09;bash脚本基础练习 1&#xff09;第一题&#xff1a;请在终端里定义两个用户变量num120&#xff0c…

来自大厂硬盘的降维打击!当希捷酷玩520 1TB SSD卷到369,请问阁下该怎么应对?

来自大厂硬盘的降维打击&#xff01;当希捷酷玩520 1TB SSD卷到369&#xff0c;请问阁下该怎么应对&#xff1f; 哈喽小伙伴们好&#xff0c;我是Stark-C~ 今年4月份的时候因为电脑上的游戏盘突然挂掉&#xff0c;为了性价比选购了希捷酷玩520 1TB SSD&#xff0c;同时我也是…

中国历年肥料进口数量统计报告

数据来源于国家统计局&#xff0c;为1991年到2021年我国每年肥料进口数量统计。 2021年&#xff0c;我国进口肥料909万吨&#xff0c;比上年减少151万吨。 数据统计单位为&#xff1a;万吨 数据说明&#xff1a; 数据来源于国家统计局&#xff0c;为海关进出口统计数 我国肥料…

网络网络层

data: 2024/5/25 14:02:20 周六 limou3434 叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.协议结构2.封装分离3.…

SpringBoot与MyBatis零XML配置集成(附源码)

源代码先行&#xff1a; Gitee本文介绍的完整仓库&#xff1a;https://gitee.com/obullxl/ntopic-bootGitHub本文介绍的完整仓库&#xff1a;https://github.com/obullxl/ntopic-boot 背景介绍 在Java众多的ORM框架里面&#xff0c;MyBatis是比较轻量级框架之一&#xff0c;…

【JavaEE进阶】——MyBatis操作数据库 (#{}与${} 以及 动态SQL)

目录 &#x1f6a9;#{}和${} &#x1f388;#{} 和 ${}区别 &#x1f388;${}使用场景 &#x1f4dd;排序功能 &#x1f4dd;like 查询 &#x1f6a9;数据库连接池 &#x1f388;数据库连接池使⽤ &#x1f6a9;MySQL开发企业规范 &#x1f6a9;动态sql &#x1f388…

PCIe总线-事物层之TLP路由介绍(七)

1.概述 下图是一个PCIe总线系统示意图。此时RC发出一个TLP&#xff0c;经过Switch访问EP&#xff0c;TLP的路径为红色箭头所示。首先TLP从RC的下行OUT端口发出&#xff0c;Switch的上行IN端口接收到该TLP后&#xff0c;根据其路由信息&#xff0c;将其转发到Switch的下行OUT端…

Vue.js 动态组件与异步组件

title: Vue.js 动态组件与异步组件 date: 2024/6/2 下午9:08:50 updated: 2024/6/2 下午9:08:50 categories: 前端开发 tags:Vue概览动态组件异步加载性能提升路由管理状态控制工具生态 第1章 Vue.js 简介 1.1 Vue.js 概述 Vue.js 是一个渐进式的JavaScript框架&#xff0c;…

docker以挂载目录启动容器报错问题的解决

拉取镜像&#xff1a; docker pull elasticsearch:7.4.2 docker pull kibana:7.4.2 创建实例&#xff1a; mkdir -p /mydata/elasticsearch/configmkdir -p /mydata/elasticsearch/dataecho "http.host: 0.0.0.0" >> /mydata/elasticsearch/config/elasti…

深入解析Java中List和Map的多层嵌套与拆分

深入解析Java中List和Map的多层嵌套与拆分 深入解析Java中List和Map的多层嵌套与拆分技巧 &#x1f4dd;摘要引言正文内容什么是嵌套数据结构&#xff1f;例子&#xff1a; 遍历嵌套List和Map遍历嵌套List遍历嵌套Map 拆分嵌套数据结构拆分嵌套List拆分嵌套Map &#x1f914; Q…

【CTF Web】CTFShow web18 Writeup(文件包含漏洞+日志注入+RCE)

web18 1 阿呆加入了过滤&#xff0c;这下完美了。 解法 <?php if(isset($_GET[c])){$c$_GET[c];if(!preg_match("/php|file/i",$c)){include($c);}}else{highlight_file(__FILE__); } ?>用 dirsearch 扫了下&#xff0c;什么都没找到。 Wappalyzer 检测到 …

计算机视觉与模式识别实验1-3 图像滤波

文章目录 &#x1f9e1;&#x1f9e1;实验流程&#x1f9e1;&#x1f9e1;1. 对图像加入椒盐噪声&#xff0c;并用均值滤波进行过滤2.对图像加入高斯噪声&#xff0c;并用高斯滤波进行过滤3.对图像加入任意噪声&#xff0c;并用中值滤波进行过滤4.读入一张灰度图像&#xff0c;…

Java项目:95 springboot班级回忆录的设计与实现

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本管理系统有管理员和用户。 本海滨学院班级回忆录管理员功能有个人中心&#xff0c;用户信息管理&#xff0c;班委信息管理&#xff0c;班级信息管理…

云计算-高级云资源配置(Advanced Cloud Provisioning)

向Bucket添加公共访问&#xff08;Adding Public Access to Bucket&#xff09; 在模块5中&#xff0c;我们已经看到如何使用CloudFormation创建和更新一个Bucket。现在我们将进一步更新该Bucket&#xff0c;添加公共访问权限。我们在模块5中使用的模板&#xff08;third_templ…

多维数组找最大值

调用JavaScript的一个内置函数&#xff1a;Math.max() <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title…