解决uview中uni-popup弹出层不能设置高度问题

开发场景:点击条件筛选按钮,在弹出的popup框中让用户选择条件进行筛选

但是在iphone12/13pro展示是正常,但是切换至其他手机型号就填充满了整个屏幕,需要给这个弹窗设置一个固定的高度

iphone12/13pro与其他型号手机对比

一开始,我是在u-popup上设置的自定义样式

但是并没有实现我需要的

从网上查阅资料,发现可以在popup中嵌套的子级中,将里边的内容设置固定的高度,这样内容就不会超出去了。

最终效果:

完整代码附上:

<!-- 弹出层 展示更多条件 -->
<u-popup :safeAreaInsetBottom="false":show="showPopup" @close="closePopup" mode="bottom" @open="openPopup" :round="10" ><view class="ConditionPopup"><view v-for="(item,index) in conditionDataList" :key="index" class="ConditionPopup_list"><view class="ConditionPopup_list__title">{{item.title}}</view><view class="ConditionPopup_list__content"><view @click="changeconditionitem(conditionDataList[index],items)" v-for="(items,indexs) in conditionDataList[index].list" :key="indexs" class="ConditionPopup_list__content_items" :class="items.check ? 'ConditionPopup_list__content_activeitems' : '' "><view>{{items.text}}</view></view></view></view><view class="push-button"><u-button text="一键重置" @click="qxBtn"></u-button></view><view class="btnPopup"><u-button :customStyle="btnPopupqx" text="取消" @click="qxBtn"></u-button><u-button :customStyle="btnPopupcx" text="查询" @click="searchBtn"></u-button></view></view>
</u-popup>

css部分

// 条件弹出层
.ConditionPopup{box-sizing: border-box;padding: 15rpx 12rpx 4rpx 12rpx;height: 600rpx;overflow: auto;&_list{margin-bottom: 20rpx;&__title{font-size: 28rpx;font-weight: 600;color: #333333;margin-bottom: 15rpx;}&__content{display:flex;flex-wrap: wrap;&_items{padding: 24rpx 20rpx;background: #F1F1F1;border-radius: 6rpx;font-size: 26rpx;font-weight: 400;color: #666666;margin: 0 24rpx 24rpx 0;}&_activeitems{background: #00A39C;color: #FFFFFF;}}}
}

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

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

相关文章

内衣洗衣机和手洗哪个干净?内衣洗衣机便宜好用的牌子推荐

单纯的用手清洗内衣&#xff0c;是很难的清洁到内衣物上的每一个角落的污渍。另外&#xff0c;手洗时所用的水以及香皂并不能彻底杀死衣物上的细菌&#xff0c;反而会在内衣物上滋生细菌。长时间穿这种内衣&#xff0c;对身体有潜在的危害。相比较而言&#xff0c;专用的内衣洗…

不同类型的开源许可证

不同类型的开源许可证 什么是开源许可证 最简单的解释是&#xff0c;开源许可证是计算机软件和其他产品的许可证&#xff0c;允许在定义的条款和条件下使用、修改或共享源代码、蓝图或设计。开源并不意味着该软件可以根据需要使用、复制、修改和分发。根据开源许可证的类型&a…

【开源】基于Vue+SpringBoot的高校宿舍调配管理系统

项目编号&#xff1a; S 051 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S051&#xff0c;文末获取源码。} 项目编号&#xff1a;S051&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能需求2.1 学生端2.2 宿管2.3 老师端 三、系统…

基于Netty的网络调用实现

作为一个分布式消息队列&#xff0c;通信的质量至关重要。基于TCP协议和Socket实现一个高效、稳定的通信程序并不容易&#xff0c;有很多大大小小的“坑”等待着经验不足的开发者。RocketMQ选择不重复发明轮子&#xff0c;基于Netty库来实现底层的通信功能。 1 Netty介绍 Net…

VOC数据集转换为COCO数据集

VOC数据集格式 get_list.py import os import random import shutil# 设置随机种子 random.seed(1000)# 判断Annotations和JpegImages是否对应 train_precent=0.8 label_path= "../../Annotations" print(os.path.abspath(label_path)) save="../Main" pr…

【开源】基于Vue和SpringBoot的学校热点新闻推送系统

项目编号&#xff1a; S 047 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S047&#xff0c;文末获取源码。} 项目编号&#xff1a;S047&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 新闻类型模块2.2 新闻档案模块2.3 新…

Docker的项目资源参考

Docker的项目资源包括以下内容&#xff1a; Docker官方网站&#xff1a;https://www.docker.com/ Docker Hub&#xff1a;https://hub.docker.com/ Docker文档&#xff1a;https://docs.docker.com/ Docker GitHub仓库&#xff1a;https://github.com/docker Docker官方博客…

CentOS7安装MiniO

目录 1、简介 2、安装 2.1、Binary 2.2、RPM&#xff08;RHEL&#xff09;就是红帽&#xff0c;CentOS就用这个 2.3、DEB&#xff08;Ubuntu/Debian&#xff09; 2.4、创建指定的目录并且将下载的安装包上传上去 3、启动MiniO服务 3.1、脚本如下&#xff1a; 4、进入服务…

[个人笔记] vCenter6.7使用自建SSL证书

SSL - 运维篇 第三章 vCenter6.7使用自建SSL证书 SSL - 运维篇系列文章回顾vCenter6.7使用自建SSL证书vCenter 6.7 上传文件到ShellvCenter 6.7 Shell 替换SSL证书全流程测试&验证 参考链接 系列文章回顾 第二章 FortiGate防火墙使用自建SSL证书 vCenter6.7使用自建SSL证书…

Python基础语法之学习占位符

Python基础语法之学习占位符 一、代码二、效果 一、代码 name "张三" sex "男" age 10 money 12.5# 通过占位符完成拼接 print("姓名&#xff1a;%s" % name) print("姓名&#xff1a;%s,性别&#xff1a;%s" % (name, sex))text…

RabbitMQ消息模型之Routing-Direct

Routing Direct 在Fanout模式中&#xff0c;一条消息&#xff0c;会被所有订阅的队列都消费。但是在某些场景下&#xff0c;我们希望不同的消息被不同的队列消费。这时就要用到Direct类型的Exchange。 在Direct模型下&#xff1a; 队列与交换机的绑定&#xff0c;不能是任意…

【算法刷题】Day9

文章目录 611. 有效三角形的个数![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9d627e680e9144a2b67474a1d80aa030.png)题解&#xff1a;代码&#xff1a; LCR 179. 查找总价格为目标值的两个商品题解&#xff1a;代码&#xff1a; 611. 有效三角形的个数 原题链…

肖sir__mysql之视图__009

mysql之视图 一、什么是视图 视图是一个虚拟表&#xff08;逻辑表&#xff09;&#xff0c;它不在数据库中以存储形式保存&#xff08;本身包含数据&#xff09;&#xff0c;是在使用视图的时候动态生成。 二、视图作用 1、查询数据库中的非常复的数据 例如&#xff1a;多表&a…

Bitcoin SV 和 Bitcoin Core 之间首次跨链原子交换

我们已经执行了 Bitcoin SV 和 Bitcoin Core 之间的首次原子交换。 这一成就代表了比特币 SV 的重大进步&#xff0c;以去信任的方式促进了与其他区块链的无缝互操作性。 图片源自Gemini 在上一篇文章中&#xff0c;我们解释了原子交换的高级理论。 我们深入研究了使用哈希时间…

高项备考葵花宝典-项目范围管理输入、输出、工具和技术

项目范围管理包括确保项目“做”且“只做”所需的全部工作&#xff08;即不能少做&#xff0c;也不能多做&#xff0c;如果多做&#xff0c;就要消耗团队额外的时间和资源&#xff0c;并且无法被认可&#xff09;&#xff0c;以成功完成项目。项目范围管理主要在于定义和控制哪…

Windows核心编程 注册表

目录 注册表概述 打开关闭注册表 创建删除子健 查询写入删除键值 子健和键值的枚举 常用注册表操作 注册表概述 注册表是Windows操作系统、硬件设备以及客户应用程序得以正常运行和保存设置的核心"数据库"&#xff0c;也可以说是一个非常巨大的树状分层结构的…

Django路由分发

首先明白一点&#xff0c;Django的每一个应用下都可以有自己的templates文件夹&#xff0c;urls.py文件夹&#xff0c;static文件夹&#xff0c;基于这个特点&#xff0c;Django能够很好的做到分组开发&#xff08;每个人只写自己的app&#xff09;&#xff0c;作为老大&#x…

使用tomcat搭建简易文件服务器

步骤 1、在本机另外部署一个tomcat作为文件服务器 可以像我这样将tomcat文件复制一个做为服务器 2、在webapps下新建文件夹uploadfiles&#xff0c;这个文件夹就是用来存储上传的文件的 &#xff08;记住一定要是在作为服务器的tomcat的webapps下&#xff09; 3、修改conf/…

Redis集群模式

Redis集群主要有三种模式 主从复制模式&#xff08;Master-Slave&#xff09;、哨兵模式&#xff08;Sentinel&#xff09;和Cluster模式 主从复制模式&#xff1a;适用于数据备份和读写分离场景&#xff0c;配置简单&#xff0c;但在主节点故障时需要手动切换。哨兵模式&…

vue005——vue组件入门(非单文件组件和单文件组件)

一、非单文件组件 1.1、单文件组件的使用 1.1.1、局部注册 1、第一步&#xff1a;创建school组件 2、第二步&#xff1a;注册组件&#xff08;局部注册&#xff09; 3、第三步&#xff1a;使用组件&#xff08;编写组件标签&#xff09; <!DOCTYPE html> <html>…