解决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,一经查实,立即删除!

相关文章

Golang 模块版本管理与语义版本控制详解

目录 语义版本控制&#xff08;SemVer&#xff09; Go 模块版本 模块版本的选择和升级 go.mod 文件 版本管理最佳实践 小结 在 Golang 中&#xff0c;模块&#xff08;module&#xff09;是 Go 1.11 版本引入的依赖管理系统&#xff0c;帮助开发者管理项目的依赖。在 Go …

Python学习路线 - Python语言基础入门 - 学习汇总

Python学习路线 - Python语言基础入门 - 学习汇总 目录准备工作基础语法判断语句功能快捷键功能快捷键功能快捷键功能快捷键功能快捷键功能快捷键功能快捷键功能快捷键 目录 准备工作 基础语法 判断语句 功能快捷键 功能快捷键 功能快捷键 功能快捷键 功能快捷键 功能…

微信小程序:button微信开放能力打开客服会话

文档 https://developers.weixin.qq.com/miniprogram/dev/component/button.html 按钮关键属性 open-type"contact"功能按钮 <button class"button__open-type"open-type"contact"> </button>css样式 父元素需要设置为相对定位…

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 的输入…

c/c++ header_only 头文件实现的关键点

header_only 头文件实现的关键点 ------------------------------------------------------------------------- author: hjjdebug date: 2023年 11月 28日 星期二 16:58:38 CST descriptor: header_only 头文件实现的关键点1. 对外声明的函数必需加上inline, 消除连接的歧义…

nexus私服开启HTTPS

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

在 Qt 的文本编辑类中,document() 是一个成员函数,用于获取文档对象

在 Qt 的文本编辑类中&#xff0c;document() 是一个成员函数&#xff0c;用于获取文档对象。它返回与文本编辑器关联的 QTextDocument 对象的指针。 QTextDocument 类是 Qt 中用于处理富文本内容的类。它包含了文本内容以及相关的格式、样式和布局信息。通过 document() 函数…

关于线程池使用的注意

标题&#xff1a;线程池使用注意事项详解 引言&#xff1a; 线程池是多线程编程中常用的一种技术&#xff0c;它可以有效地管理和复用线程资源&#xff0c;提高程序的性能和效率。然而&#xff0c;在使用线程池时&#xff0c;我们需要注意一些问题&#xff0c;以避免潜在的风险…

计算机网络的分类

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

FWT+高维前缀和:Gym - 103202M

https://vj.imken.moe/contest/597216#problem/F 考虑两个人的集合分别为 i , j i,j i,j&#xff0c;那么我们令 f ( i ⊗ j ) f(i\otimes j) f(i⊗j)&#xff0c;其中 f ( s ) f(s) f(s) 表示两个人不同集合恰好为 s s s&#xff0c;显然 f ( s ) f(s) f(s) 可以FWT求…

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

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

Java编程强化练习(二)

表达式计算&#xff08;支持空格&#xff0c;连乘&#xff0c;连除&#xff09;&#xff08;选做题&#xff0c;不计分&#xff09; 【问题描述】 从标准输入中读入一个整数算术运算表达式&#xff0c;如5 - 1 * 2 * 3 12 / 2 / 2 。计算表达式结果&#xff0c;并输出。 …

【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…

团队可能出现的问题以及应对方案

问题&#xff1a; 1、办公室政治&#xff1a;我的官比你大&#xff0c;你必须听我的&#xff0c;你的想法不重要&#xff0c;这样大家就不敢说话&#xff0c;表面和谐背地里勾心斗角。 2、信息不畅&#xff1a;正常的组织信息是流动的&#xff0c;因为有办公室政治大家就阻止…

使用tensorrt加速深度学习模型推断

使用tensorrt加速深度学习模型推断 1.import以及数据加载、构建engine函数2.导入官方模型及CIFAR100数据集3.不采用tensort的推断时间4.采用tensort加速—使用tensorrt 库4.1 导出onnx模型4.2 生成tensorrt engine 文件4.3 deserialize4.4 推断 5.采用tensort加速—使用torch2t…

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…

SpringBoot集成knife4j

1&#xff09;添加knife4j的依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>3.0.2</version> </dependency>SpringBoot的版本&#xff1a; <pa…