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

uni-app:实现简易自定义下拉列表

效果 

代码

<template><view><view class="dropdown-trigger" @tap="showDropdown">{{ selectedItem }}</view><view class="dropdown-list" v-if="showList"><view class="dropdown-item" v-for="item in listData" @tap="selectItem(item)" :key="item">{{ item }}</view></view></view>
</template><script>
export default {data() {return {showList: false, // 控制下拉列表的显示和隐藏listData: ['选项1', '选项2', '选项3'], // 下拉列表的数据selectedItem: '选项1' // 选中的下拉列表项}},methods: {showDropdown() {this.showList = !this.showList; // 切换下拉列表的显示状态},  selectItem(item) {this.selectedItem = item; // 选择下拉列表项this.showList = false; // 隐藏下拉列表}}
};
</script>
<style>.dropdown-trigger{border:1px solid black;width: 250rpx;}.dropdown-list{border:1px solid black;width: 250rpx;}
</style>

扩展-下拉列表位置

如果下拉列表下方有内容,当下拉列表的内容出现时,会造成下拉列表占据一定的高度,将内容挤压至下拉列表的下方(正常是下拉列表的内容可以覆盖内容,而不占据一定高度)

效果

被挤压的效果

 正常效果:由于没设置背景色,现在看着就是这样的效果

更换背景色就展示出希望得到的效果

核心代码

一、在需要出现下拉列表的元素上设置相对定位(position: relative),用于作为下拉列表的参考位置。

.dropdown-trigger { position: relative; }

二、下拉列表使用绝对定位(position: absolute),并设置top或bottom属性来控制其在参考元素上方或下方的位置。

.dropdown-list { position: absolute;}

完整代码

<template><view><view class="dropdown-trigger" @tap="showDropdown">{{ selectedItem }}</view><view class="dropdown-list" v-if="showList"><view class="dropdown-item" v-for="item in listData" @tap="selectItem(item)" :key="item">{{ item }}</view></view><view>我是内容</view></view>
</template><script>export default {data() {return {showList: false, // 控制下拉列表的显示和隐藏listData: ['选项1', '选项2', '选项3'], // 下拉列表的数据selectedItem: '选项1' // 选中的下拉列表项}},methods: {showDropdown() {this.showList = !this.showList; // 切换下拉列表的显示状态},selectItem(item) {this.selectedItem = item; // 选择下拉列表项this.showList = false; // 隐藏下拉列表}}};
</script>
<style>.dropdown-trigger {border: 1px solid black;width: 250rpx;position:relative;}.dropdown-list {border: 1px solid black;width: 250rpx;position:absolute;background-color: aquamarine;}
</style>

扩展-下拉列表选中颜色改变

效果

核心代码

三目运算给出样式

:class="{selected: selectedItem === item}"

完整代码

<template><view><view class="dropdown-trigger" @tap="showDropdown"><text>{{ selectedItem }}</text></view><view class="dropdown-list" v-if="showList"><view class="dropdown-item" v-for="item in listData" @tap="selectItem(item)" :key="item" :class="{selected: selectedItem === item}">{{ item }}</view></view><view>我是内容</view></view>
</template><script>export default {data() {return {showList: false, // 控制下拉列表的显示和隐藏listData: ['选项1', '选项2', '选项3'], // 下拉列表的数据selectedItem: '选项1' // 选中的下拉列表项}},methods: {showDropdown() {this.showList = !this.showList; // 切换下拉列表的显示状态},selectItem(item) {this.selectedItem = item; // 选择下拉列表项this.showList = false; // 隐藏下拉列表}}};
</script>
<style>.dropdown-trigger {border: 1px solid black;width: 250rpx;position:relative;}.dropdown-list {border: 1px solid black;width: 250rpx;position:absolute;background-color: aquamarine;}/* 自定义选中项的样式 */.selected {color: red;font-weight: bold;}
</style>

相关文章:

uni-app:实现简易自定义下拉列表

效果 代码 <template><view><view class"dropdown-trigger" tap"showDropdown">{{ selectedItem }}</view><view class"dropdown-list" v-if"showList"><view class"dropdown-item" v-f…...

排序算法——直接插入排序

一、介绍 插入排序就是将前两个元素排好&#xff0c;再将第三个元素通过与前边的元素比较后插入适当的位置&#xff0c;再将第四个元素插入&#xff0c;不断重复插入与前边元素比较的操作&#xff0c;直到将元素都排列好。 演示如下&#xff1a; 视频演示&#xff1a;…...

手动抄表和自动抄表优缺点对比

随着科技的发展&#xff0c;自动抄表技术已经越来越成熟&#xff0c;被广泛应用于各个领域。然而&#xff0c;手动抄表在一些特定场景下仍然具有一定的优势。本文将从手动抄表和自动抄表的优缺点入手&#xff0c;对比分析它们的应用场景和使用价值。 1.成本低&#xff1a;手动抄…...

HiSilicon352 android9.0 emmc添加新分区

添加新分区 从emmc中单独划分出一个分区&#xff0c;用来存储相关数据&#xff08;可用于存储照片&#xff0c;视频&#xff0c;音乐和文档等&#xff09;或者系统日志log&#xff0c;从而不影响到其他分区。 实现方法&#xff1a; device/hisilicon/Hi3751V350/etc/Hi3751V3…...

networkX-04-查找k短路

文章目录 1.构建图2.使用networkX查找最短路径3.自己构建方法 教程仓库地址&#xff1a;github networkx_tutorial import networkx as nx import matplotlib.pyplot as plt1.构建图 # 创建有向图 G nx.DiGraph()# 添加带权重的边 edges [(0, 1, 1), (0, 2, 2), (1, 2, 1), …...

Linux虚拟机搭建RabbitMQ集群

普通集群模式&#xff0c;意思就是在多台机器上启动多个 RabbitMQ 实例&#xff0c;每台机器启动一个。创建的 queue&#xff0c;只会放在一个 RabbitMQ 实例上&#xff0c;但是每个实例都同步 queue 的元数据&#xff08;元数据可以认为是 queue 的一些配置信息&#xff0c;通…...

C之fopen/fclose/fread/fwrite/flseek

一、C中文件操作简介 c中的文件操作大致和linux的文件操作类似&#xff0c;但是毕竟是不同的API&#xff0c;所以会有些差异。部分差异会在下面的案例中体验 二、fopen open的参数有两个一个是文件名&#xff0c;一个是模式选择&#xff0c;不同open函数&#xff0c;open中的模…...

3D机器视觉:解锁未来的立体视野

原创 | 文 BFT机器人 机器视觉领域一直在不断演进&#xff0c;从最初的二维图像处理&#xff0c;逐渐扩展到了更复杂的三维领域&#xff0c;形成了3D机器视觉。3D机器视觉技术的涌现为计算机系统带来了全新的感知和理解能力&#xff0c;这一领域的发展正日益受到广泛关注。本文…...

大端字节序存储 | 小端字节序存储介绍

为什么存储的顺序有些变动呢&#xff1f; 大小端的介绍 我们在创建变量时&#xff0c;操作系统就会给你分配空间&#xff0c;比如你创建了【short/int/double/float】的变量&#xff0c;这些变量的类型都是大于1个字节的&#xff0c;操作系统会根据你这个变量的类型&#xff…...

ASP.Core3.1 WebAPI 发布到IIS

本篇文章简述如何在IIS中发布你的.Core 程序 1.打包 首先你要打包好你程序&#xff0c;如果你是Visual Studio开发的程序&#xff0c;那你右击你的项目点击发布 如果你是Visual Code 开发的&#xff0c;那你在你的终端切换到你的目录然后执行命令 dotnet publish --config…...

MyBatisPlus属性自动填充和乐观锁插件+查询删除操作+整合SpringBoot出现问题解决

属性字段自动填充 一、实体类和数据表添加两个字段&#xff08;属性&#xff09; 表&#xff1a;create_tiem/update_time 实体类&#xff1a;createTime/updateTime 二、实体类中属性进行注解添加 TableField(fillFieldFill.INSERT) private Date createTime;TableField(f…...

软件测试/测试开发丨App自动化—CSS 定位与原生定位

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/27684 一、原生定位 元素属性定位组合定位 # ID 定位 driver.find_element_by_android_uiautomator(\new UiSelector().resourceId("<element-I…...

c语言:通讯录管理系统(文件版本)

前言&#xff1a;在大多数高校内&#xff0c;都是通过设计一个通讯录管理系统来作为c语言课程设计&#xff0c;通过一个具体的系统设计将我们学习过的结构体和函数等知识糅合起来&#xff0c;可以很好的锻炼学生的编程思维&#xff0c;本文旨在为通讯录管理系统的设计提供思路和…...

Android Studio 配置Git SVN忽略文件

在使用Android Studio进行版本控制时&#xff0c;经常会遇到需要忽略某些文件的情况&#xff0c;比如临时文件、编译生成的文件等。这些文件虽然在项目中存在&#xff0c;但不希望被加入到版本控制中。 在Android Studio中设置忽略文件 在Android Studio中&#xff0c;我们可…...

独享IP地址的层级划分和管理:打造稳定高效的网络架构

在网络架构设计中&#xff0c;独享地址的层级划分和管理是一项关键任务。它不仅能提供更好的网络性能和安全性&#xff0c;还能帮助企业实现更高效的资源管理。本文将为您详细介绍独享地址的层级划分和管理的重要性&#xff0c;并提供具体的方案和实际操作建议。 第一部分&…...

js中async的作用

async是JavaScript中的关键字&#xff0c;用于表示函数是异步的。 当函数被标记为async时&#xff0c;该函数会自动返回一个Promise对象&#xff0c;这个Promise对象的状态可能为resolved或rejected&#xff0c;具体取决于函数内部的操作和返回值。 使用async关键字时&#x…...

什么是信创测试?信创测试工具有哪些?

信创全称是“信息技术应用创新”&#xff0c;旨在实现信息技术自主可控&#xff0c;规避外部技术制裁和风险&#xff0c;其涉及产业链包括硬件、基础软件、应用软件、云服务、数据安全等领域。 信创测试是指对信创工程项目中的产品、系统等进行测试和验证&#xff0c;以确保其…...

健康医疗类APP在高需求快速发展背景下,商业化如何快速破局增收?

随着人口老龄化、亚健康人群的增加&#xff0c;人们健康意识的觉醒&#xff0c;健康医疗成为的大众重点关注的领域。同时&#xff0c;伴随互联网技术的飞速发展&#xff0c;为医疗行业促生了大量创新产品和衍生品&#xff0c;在此背景下&#xff0c;我国移动医疗产品正从萌芽走…...

java开源商城免费搭建 VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城 短视频商城

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…...

k8spod就绪检查失败

pod 一直未就绪 kube-system metrics-server-7764f6c67c-2kts9 0/1 Running 0 10m kubect describe 查看 就绪探针未通过 Normal Started 3m19s kubelet Started container metrics-server Warning Unhealthy 5s (x20 over 2m55s) kubelet Readiness probe failed: HTTP probe…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...