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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电容笔值不值得买?ipad上好用的电容笔推荐

由于大多数学生都没有稳定的工作&#xff0c;在购买产品的时候&#xff0c;往往会选择一些比较经济实惠的产品。随着ipad的版本更新&#xff0c;以及出现更多的功能&#xff0c;它将逐渐进入我们的生活与工作。由于电子产品的不断升级&#xff0c;不断改进&#xff0c;对电容笔…

Spring WebClient 基于响应式编程模型的HTTP客户端

一、简介 WebClient是一个非阻塞的、可扩展的、基于Reactive Streams规范的HTTP客户端。它提供了一种简洁的方式来进行HTTP请求&#xff0c;并且可以很好地与其他Spring组件集成。WebClient支持同步和异步操作&#xff0c;使得它非常适合用于构建响应式应用程序。 WebClient允…

Unity ToLua热更框架使用教程(1)

从本篇开始将为大家讲解ToLua在unity当中的使用教程。 Tolua的框架叫LuaFramework&#xff0c;首先附上下载链接&#xff1a; https://github.com/jarjin/LuaFramework_UGUI_V2 这个地址的是UGUI的。 下载完之后导入项目&#xff0c;首先&#xff0c;我们要先让这个项目跑起…

BRISK: Binary Robust Invariant Scalable Keypoints全文翻译

pdf链接&#xff1a;https://pan.baidu.com/s/1gFAYMPJStl4cF0CswY9cMQ 提取码&#xff1a;yyds 摘要 从图像中有效和高效地生成关键点是文献中深入研究的问题&#xff0c;并形成了许多计算机视觉应用的基础。该领域的领导者是SIFT和SURF算法&#xff0c;它们在各种图像转换下…

为什么说,网络安全工程师是网安行业的天花板?

为什么说&#xff0c;网络安全工程师是网安行业的天花板&#xff1f; 最近看到网上有很多人在问诸如&#xff1a;“怎样成为网络信息安全工程师”等相关问题&#xff0c;甚至还有人说“网络安全工程师已经成为这个行业的天花板”&#xff0c;这可能与近几年网络安全事件频发&a…

深度解析locked勒索病毒,勒索病毒解密,数据恢复

locked勒索病毒曾经消失了一段时间&#xff0c;但是从今年6月份以来&#xff0c;这种类型的勒索病毒又“重出江湖”&#xff0c;被感染的服务器和企业越来越多&#xff0c;这让很多企业和安全运维人员都非常头疼。为了减少这种情况的发生&#xff0c;云天数据恢复中心将对locke…

微信小程序 获取当前屏幕的可见高宽度

很多时候我们做一下逻辑 需要用整个窗口的高度或宽度参与计算 而且很多时候我们js中拿到的单位都是px像素点 没办法和rpx同流合污 官方提供了wx.getSystemInfoSync() 可以获取到部分窗口信息 其中就包括了整个窗口的宽度和高度 wx.getSystemInfoSync().windowHeight 返回值为像…

网络原理之TCP_IP

目录 应用层重点协议 传输层重点协议 1.UDP协议 (一)UDP协议段格式 (二)UDP的特点 无连接 不可靠传输 面向数据报 全双工 缓冲区 大小受限 (三)基于UDP的应用层协议 (四)面试题 2.TCP协议 (一)TCP协议段格式 (二)TCP的特点 有连接 可靠传输 面向字节流 缓冲…

Python教程——配置环境,再探IDE

文章目录 一、Python安装下载安装验证 二、第一个Python程序常见问题 三、Python解释器四、PyCharm工具安装和配置安装使用PyCharm基本使用 一、Python安装 下载 如果我们想要使用Python语言编写程序&#xff0c;我们必须下载Python安装包并配置Python环境&#xff0c;我们现…

geecg-uniapp 源码下载运行 修改端口号 修改tabBar 修改展示数据

APP体验&#xff1a; http://jeecg.com/appIndex技术官网&#xff1a; http://www.jeecg.com安装文档&#xff1a; 快速开始 JeecgBoot 开发文档 看云视频教程&#xff1a; 零基础入门视频官方支持&#xff1a; http://jeecg.com/doc/help 一&#xff0c;下载安装 源码下载…

C++ 类和对象篇(三) 空类和6个默认成员函数

目录 一、空类 1. 是什么&#xff1f; 2. 空类中的成员 3. 空类的大小 二、6个默认成员函数 三、 构造函数 1. 构造函数是什么&#xff1f; 2. 为什么C要引入构造函数&#xff1f; 四、析构函数 1. 析构函数是什么&#xff1f; 2. 为什么要有析构函数&#xff1f; 五、拷贝构造…

win11安装双系统Ubuntu的坎坷记录

之前一直装的都是在一个硬盘中&#xff0c;这是是两块盘。 我的电脑是惠普暗影精灵8Pro 一 安装前的准备工作 1.1 记得先关闭&#xff0c;Bitlocker 输入wins&#xff0c;搜索框输入&#xff1a;设备加密设置 1.2 BIOS设置 &#xff08;惠普这电脑是开机时按 F10&#xff0…

SpringCloud(三)Sentinel、Seata、多级缓存

文章目录 Sentinel雪崩问题Sentinel与Hystrixsentinel使用案例限流规则流控模式流控效果热点参数限流 隔离和降级Feign整合Sentinel线程隔离熔断降级 授权规则与规则持续化自定义异常结果规则管理模式 Seata分布式事务问题理论基础CAP定理BASE理论 Seata架构部署TC服务微服务集…

【单片机】16-LCD1602和12864和LCD9648显示器

1.LCD显示器相关背景 1.LCD简介 &#xff08;1&#xff09;显示器&#xff0c;常见显示器&#xff1a;电视&#xff0c;电脑 &#xff08;2&#xff09;LCD&#xff08;Liquid Crystal Display&#xff09;&#xff0c;液晶显示器&#xff0c;原理介绍 &#xff08;3&#xff…

Java实现哈希表

1.哈希表定义 哈希表&#xff08;hash table&#xff0c;也叫散列表&#xff09;&#xff0c;是根据关键码值&#xff08;key value&#xff09;而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。这…

浏览器唤起钉钉 各项功能

浏览器唤起钉钉对应人员聊天 文档地址 https://open.dingtalk.com/document/client/unified-routing-protocol 唤起聊天 不过只能唤起叮叮的名片 id为叮叮号 <a href"dingtalk://dingtalkclient/action/sendmsg?dingtalk_id{id}"></a>id&#xff1a; …

maven的pom.xml文件显示被删除

文章目录 1.问题情况2.问题分析3.问题解决 1.问题情况 2.问题分析 这些 pom.xml 文件被 maven 视为了忽略文件。 3.问题解决 路径&#xff1a;File --> Settings --> Build&#xff0c;Execution&#xff0c;Deployment --> Build Tools --> Maven --> Ignor…

06_Node.js服务器开发

1 服务器开发的基本概念 1.1 为什么学习服务器开发 Node.js开发属于服务器开发&#xff0c;那么作为一名前端工程师为什么需要学习服务器开发呢&#xff1f; 为什么学习服务器开发&#xff1f; 能够和后端程序员更加紧密配合网站业务逻辑前置扩宽知识视野 1.2 服务器开发可…

bochs 对 Linux0.11 进行调试 (TODO: 后面可以考虑集成 vscode+gdb+qemu)

我在阅读 Linux0.11 源码时&#xff0c;对一个指令 LDS 感到困惑。 看了下 intel 指令集手册&#xff0c;能猜到 LDS 的功能&#xff0c;但不确定。 于是决定搭建调试环境&#xff0c;看看 LDS 的功能是否真如自己猜测。 首先 make debug 运行 qemu-Linux0.11&#xff0c;命…

基于Java+SpringBoot+Vue在线家具商城系统的设计与实现 前后端分离【Java毕业设计·文档报告·代码讲解·安装调试】

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…