解决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.mzph.cn/news/193407.shtml

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

相关文章

Linux环境下 make/makefile、文件时间属性 详解!!!

1.项目自动化构建工具make/makefile 1.为什么要有make/makefile 我们先写一个简单的代码&#xff0c;然后编译生成一个可执行程序&#xff0c;下面的内容我们需要知道gcc识和编译链接的一些知识&#xff0c;不清楚的朋友们可以点这里http://t.csdnimg.cn/0QvL8 我们知道要想生…

Java 数据结构篇-用链表、数组实现队列(数组实现:循环队列)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 队列的说明 1.1 队列的几种常用操作 2.0 使用链表实现队列说明 2.1 链表实现队列 2.2 链表实现队列 - 入栈操作 2.3 链表实现队列 - 出栈操作 2.4 链表实现队列 …

9-1定义一个结构体计算该日是本年中的第几天。

#include<stdio.h> struct {int year;int month;int day; }date; int main(){int days;printf("输入年月日&#xff1a;\n");scanf("%d,%d,%d",&date.year,&date.month,&date.day);switch(date.month){case 1:daysdate.day; break;case…

【Element-ui】Checkbox 多选框 与 Input 输入框

文章目录 前言一、Checkbox 多选框1.1 基础用法1.2 禁用状态1.3 多选框组1.4 indeterminate 状态1.5 可选项目数量的限制1.6 按钮样式1.7 带有边框1.8 Checkbox Events1.9 Checkbox Attributes 二、Input 输入框2.1 基础用法2.2 禁用状态2.3 可清空2.4 密码框2.5 带 icon 的输入…

nexus私服开启HTTPS

maven3.8.1以上不允许使用HTTP服务的仓库地址&#xff0c;如果自己搭建的私服需要升级为HTTPS或做一些设置&#xff0c;如果要升级HTTPS服务有两种方式&#xff1a;1、使用Nginx开启HTTPS并反向代理nexus&#xff1b;2、直接在nexus开启HTTPS。这里介绍第二种方式 1、在ssl目录…

计算机网络的分类

目录 一、按照传输介质进行分类 1、有线网络 2、无线网络 二、按照使用者进行分类 1、公用网 (public network) 2、专用网(private network) 三、按照网络规模和作用范围进行分类 1、PAN 个人局域网 2、LAN 局域网 3、MAN 城域网 4、 WAN 广域网 5、Internet 因特…

ChatGPT 的 18 种玩法,你还不会用吗?

你确定&#xff0c;你会使用 ChatGPT 了吗&#xff1f; 今天给大家整理了 18 种 ChatGPT 的用法&#xff0c;看看有哪些方法是你能得上的。 用之前我们可以打开R5Ai平台&#xff0c;可以免费使用目前所有的大模型 地址&#xff1a;R5Ai.com 语法更正 用途&#xff1a;文章…

【vue】尚硅谷vue3学习笔记

Vue3快速上手 1.Vue3简介 2020年9月18日&#xff0c;Vue.js发布3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09;耗时2年多、2600次提交、30个RFC、600次PR、99位贡献者github上的tags地址&#xff1a;https://github.com/vuejs/vue-next/release…

mysql(八)docker版Mysql8.x设置大小写忽略

Mysql 5.7设置大小写忽略可以登录到Docker内部&#xff0c;修改/etc/my.cnf添加lower_case_table_names1&#xff0c;并重启docker使之忽略大小写。但MySQL8.0后不允许这样&#xff0c;官方文档记录&#xff1a; lower_case_table_names can only be configured when initializ…

机器人与3D视觉 Robotics Toolbox Python 一 安装 Robotics Toolbox Python

一 安装python 库 前置条件需要 Python > 3.6&#xff0c;使用pip 安装 pip install roboticstoolbox-python测试安装是否成功 import roboticstoolbox as rtb print(rtb.__version__)输出结果 二 Robotics Toolbox Python样例程序 加载机器人模型 加载由URDF文件定义…

【算法每日一练]-图论(保姆级教程篇12 tarjan篇)#POJ3352道路建设 #POJ2553图的底部 #POJ1236校园网络 #缩点

目录 POJ3352&#xff1a;道路建设 思路&#xff1a; POJ2553&#xff1a;图的底部 思路&#xff1a; POJ1236校园网络 思路&#xff1a; 缩点&#xff1a; 思路&#xff1a; POJ3352&#xff1a;道路建设 由于道路要维修&#xff0c;维修时候来回都不能走&#xff0c;现要…

MDK提示:在多字节的目标代码中,没有此Unicode 字符可以映射到的字符

MDK警告提示在多字节的目标代码中&#xff0c;没有此Unicode 字符可以映射到的字符 警告提示&#xff1a; 在写MDK的工程代码时&#xff0c;发现代码中引入的头文件前方出现一些红色的叉叉&#xff0c;但是编译工程并不报错&#xff0c;功能也能正常执行的&#xff0c;只是提…

JS利用时间戳倒计时案例

我们在逛某宝&#xff0c;或者逛某东时&#xff0c;我们时常看到一个倒计时&#xff0c;时间一到就开抢&#xff0c;这个倒计时是如何做的呢&#xff1f;让我为大家介绍一下。 理性分析一下&#xff1a; 1.用将来时间减去现在时间就是剩余的时间 2.核心&#xff1a;使用将来的时…

C指针介绍(1)

文章目录 每日一言指针的简单介绍内存和地址指针在内存中的存储指针的定义和声明泛型指针 指针的关系运算算数运算关系运算 结语 每日一言 ⭐「 一声梧叶一声秋&#xff0c;一点芭蕉一点愁&#xff0c;三更归梦三更后。 」–水仙子夜雨-徐再思 指针的简单介绍 C语言指针是C语…

人工智能轨道交通行业周刊-第67期(2023.11.27-12.3)

本期关键词&#xff1a;列车巡检机器人、城轨智慧管控、制动梁、断路器、AICC大会、Qwen-72B 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMetro…

算法工程师面试八股(搜广推方向)

文章目录 机器学习线性和逻辑回归模型逻辑回归二分类和多分类的损失函数二分类为什么用交叉熵损失而不用MSE损失&#xff1f;偏差与方差Layer Normalization 和 Batch NormalizationSVM数据不均衡特征选择排序模型树模型进行特征工程的原因GBDTLR和GBDTRF和GBDTXGBoost二阶泰勒…

React使报错不再白屏

如果代码中出现问题导致报错&#xff0c;通常会使页面报错&#xff0c;导致白屏 function Head() {// 此时模拟报错导致的白屏return <div>Head --- {content}</div> } export default () > {return (<><div>下面是标题</div><Head />…

若依框架分页

文章目录 一、分页功能解析1.前端代码分析2.后端代码分析3. LIMIT含义 二、自定义MyPage,多态获取total1.定义MyPage类和对应的调用方法 一、分页功能解析 1.前端代码分析 页面代码 封装的api请求 接口请求 2.后端代码分析 controller代码 - startPage() getDataTable(…

yolo.txt格式与voc格式互转,超详细易上手

众所周知,yolo训练所需的标签文件类型是.txt的,但我们平时使用标注软件(labelimage等)标注得到的标签文件是.xml类型的,故此xml2txt之间的转换就至关重要了,这点大家不可能想不到,但是网上的文章提供的代码大多数都是冗余,或者难看,难以上手,故此作者打算提供一个相对…

Sharding-Jdbc(3):Sharding-Jdbc分表

1 分表分库 LogicTable 数据分片的逻辑表&#xff0c;对于水平拆分的数据库(表)&#xff0c;同一类表的总称。 订单信息表拆分为2张表,分别是t_order_0、t_order_1&#xff0c;他们的逻辑表名为t_order。 ActualTable 在分片的数据库中真实存在的物理表。即上个示例中的t_…