flex上下固定中间占固定高度(中间左右菜单)且内容自动滚动

news2024/11/24 3:44:36

效果图

布局:

<view class="pop_tSet">
			<view class="pop_Con">
				<view class="box_bb">
					<view class="bb_title">
						{{titleObj[popType]}}
					</view>
				</view>
				<view class="box_bb_bot">
					<view class="bnt_left">
							<view class="btn_item" v-for="(it,index) in timeSetEndObj" :key="index"
								@click="endItem(index)" :class="{'btn_active':index==endTab}">
								{{it}}
							</view>
					</view>
					<view class="bnt_right">
						<view class="btn_item_con">
							<view class="text_s" v-if="popType=='start'||(popType=='end'&&endTab==1)">
								<template v-if="startTab==1">
									<u-icon name="question-circle-fill" color="#0080FF" style="margin-right: 10rpx;"
										size="30"></u-icon>
									提前{{dayNum}}天开放预约
								</template>
							</view>
							<view class="set_form">
								<u-form :model="startForm" ref="uForm" label-position="left">
									<template v-if="popType=='start'">
											<u-form-item label="提前几天开放:" prop="startDay" :required="true"
												label-width="200" :border-bottom="false" label-align="right">
												<uni-data-select v-model="startForm.startDay" :localdata="rangeDay"
													:clear="false"></uni-data-select>
											</u-form-item>
											<u-form-item label="开放时间:" prop="startTime" label-width="auto"
												:border-bottom="false" label-align="right">
												<u-input v-model="startForm.startTime" type="select" :border="true"
													@click="selectEvent('start')" />
											</u-form-item>
									</template>
								</u-form>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 90rpx"></view>
			</view>
			<view class="fBoxBtn">
				<view class="qx" @click="qxCancel">取消</view>
				<view class="qr" @click="submit">确认</view>
			</view>
		</view>

样式:

.pop_tSet {
		height: 100%;
	}

	.pop_Con {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.box_bb {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.bb_title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 700;
				padding: 50rpx 40rpx;
				border-bottom: 1rpx solid #F0F0F0;
			}
		}

		.box_bb_bot {
			flex: 1;
			overflow: hidden;
			display: flex;
			position: relative;

			.bnt_left {
				width: 260rpx;
				background-color: $uni-text-color-gap;
				height: 100%;
				overflow-y: scroll;
			}

			.bnt_right {
				flex: 1;
				height: 100%;
			}

			.btn_item {
				padding: 40rpx 0;
				font-size: 32rpx;
				text-align: center;
				transition: background-color .2s;
			}

			.btn_item_con {
				padding: 40rpx 30rpx;

				.text_s {
					font-size: 24rpx;
					color: $uni-text-color-grey;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}

			.btn_active {
				background-color: $uni-bg-color-btn;
				color: #fff;
			}
		}

		.set_form {
			padding-left: 40rpx;
			margin-top: 80rpx;
		}
	}

	.fBoxBtn {
		width: 100%;
		padding: 0rpx 0rpx 0 0;
		display: flex;
		justify-content: space-between;
		border-top: 1rpx solid #F0F0F0;
		position: fixed;
		bottom: 0;
		z-index: 2;
		background-color: #fff;

		view {
			text-align: center;
			height: 90rpx;
			font-size: 30rpx;
			width: 50%;
			line-height: 90rpx;
		}

		.qx {
			border-right: 1rpx solid $uni-text-color-gap;
		}

		.qr {
			color: #0081FF;
		}
	}

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

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

相关文章

固体矿产资源储量分类GBT17766-2020

1999分类标准采用三轴体系划分资源量与处理&#xff0c;表达复杂、经济意义划分过细、实用性不强 虽然不再采用”三轴“表达方式&#xff0c;但依然考虑地质可靠程度、经济意义、可行性评价 矿产资源勘查&#xff1a;通常依靠地球科学知识&#xff0c;运用地质填图&#xff0…

8条指南教你设计奶油风客厅。福州中宅装饰,福州装修

作为一名专业的设计师&#xff0c;我将为您带来一些关于奶油风客厅设计的干货。奶油风是一种温馨、柔和的装修风格&#xff0c;以下是一些设计指南&#xff0c;帮助您打造一个舒适而美丽的奶油风客厅。 1. 色彩搭配 除了米色、浅黄色和淡粉色等基础色调&#xff0c;还可以尝试…

Python程序设计 二维列表(二)

实验九 二维列表 1. 血压统计 血压的正常范围是 60mmHg<舒张压<90mmHg 90mmHg<收缩压<140mmHg 输入小张测量血压的日期&#xff0c;舒张压和收缩压&#xff0c;存放到列表xy中 将小张血压不正常次数百分比计算并显示出来 将小张血压不正常的日期&#xff0c;舒张…

Vscode | Python | launch.json配置gevent多进程断点失效问题处理

Vscode | Python | launch.json配置gevent多进程断点失效问题处理 文章目录 情况描述↓↓↓解决办法直接看这里↓↓↓ 情况描述 launch.json {// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more i…

MATLAB中gurobi 运行报错与调试

问题背景如下&#xff1a;刚拿到一份MATLAB的代码&#xff0c;但是电脑第一次安装gurobi&#xff0c;在运行过程中发生了报错&#xff0c;使用断点进行调试和步进调试方法&#xff0c;最终发现&#xff0c;这个问题出在了哪一步&#xff0c;然后向了人工智能和CSDN、百度寻求答…

以时分秒为单位累计设备运行时间功能块(SMART PLC梯形图代码)

1、SMART PLC设备累计运行时间功能块 SMART PLC设备累计运行时间功能块_plc计算累计时间-CSDN博客文章浏览阅读765次。PLC FC 、FB、子程序、函数学习笔记_RXXW_Dor的博客-CSDN博客FC、 FB、 子程序&#xff0c;&#xff08;甚至包括一些指令&#xff09;这些称呼其实并没有本…

MySQL中InnoDB存储引擎详细介绍

介绍 InnoDB是一种兼顾高可靠性高和高性能的通用存储引擎&#xff0c;在MySQL5.5之后&#xff0c;InnoDB是默认的MySQL存储引擎。 特点 DML(增删改)操作遵循ACID(事务四大特性)模型&#xff0c;支持事务&#xff1b;行级锁&#xff0c;提高并发访问性能支持外链FORELGN KEY约…

Linux 认识与学习Bash——1

在Linux系统中&#xff0c;有多种命令和技巧可以帮助用户与shell交互、管理变量以及执行命令。以下是对您提供的信息的简化和概述&#xff1a; 命令查找和信息 which&#xff1a;查找系统路径中的命令位置。whereis&#xff1a;查找命令的二进制文件、源代码和手册页。type&a…

c++二分排序(向右

描述 给出有 n 个元素的由小到大的序列&#xff0c;请你编程找出某元素最后一次出现的位置。 (n<10^6 输入描述 第一行&#xff1a;一个整数&#xff0c;表示由小到大序列元素个数&#xff1b;下面 n 行&#xff0c;每行一个整数&#xff1b; 最后一行 一个整数 x&#x…

05_数组和结构体

结构体 结构体的使用(重点) 结构体值传参 传值是指将参数的值拷贝一份传递给函数&#xff0c;函数内部对该参数的修改不会影响到原来的变量 结构体地址传递 传址是指将参数的地址传递给函数&#xff0c;函数内部可以通过该地址来访问原变量&#xff0c;并对其进行修改。…

图片批量高效美化,支持图片批量旋转,360度自由旋转,让图片焕然一新!

在这个视觉为王的时代&#xff0c;图片已成为我们传达信息、展示创意的重要载体。然而&#xff0c;面对海量的图片资源&#xff0c;如何快速、高效地进行图片处理&#xff0c;让它们更好地呈现我们的想法和创意呢&#xff1f; 第一步&#xff0c;进入首助编辑高手的图片批量处…

day82 过滤器 监听器

过滤器 监听器 一 过滤器 手动在web.xml配置过滤器 url-pattern设置过滤器要保护的资源的路径 每当我打开一次index.jsp页面或者第一个jsp.jsp页面&#xff0c;都会在控制台输出&#xff1a;------------- 表示先走过一次过滤器 添加注解的方式配置过滤器 value值代表要保护…

Win11关闭Bitlocker

Win11关闭Bitlocker - 知乎 Win11默认开启 Bitlocker功能&#xff0c;如果想关闭&#xff0c;可参照以下步骤&#xff1a; 1.点击开始菜单&#xff0c;选择设置 2.点击左侧“隐私和安全性”菜单&#xff0c;然后进入右侧的“设备加密”选项 3.将设备加密选项关闭即可 点击关闭…

【Linux】Linux基础与常用指令大全

文章目录 操作系统是什么&#xff1f;1. Linux家族介绍2. Linux的安装方式3. 常用指令3.1 ls [选项] [目录/文件]&#xff08;显示目录或文件信息&#xff09;3.2 pwd&#xff08;显示当前所在目录&#xff09;3.3 任意指令加上 --help&#xff08;查看指令的用法&#xff09;3…

腾讯云APP备案指南:一站式完成备案手续,助您顺利上线

工信部最新通知要求所有互联网信息服务提供者完成移动互联网应用程序备案手续。腾讯云为开发者提供了简单易行的备案流程&#xff0c;本文详细解答如何在腾讯云平台完成备案&#xff0c;帮助开发者快速上线自己的APP。从验证备案域名到腾讯云审核&#xff0c;一步步指导您完成备…

视频素材库在哪里找免费?几个短视频素材大全告诉您

在这个视觉传达愈发重要的数字时代&#xff0c;拥有一库多样而高质量的视频素材是每位创作者的必备武器。从广告制作到社交媒体分享&#xff0c;优质的视频素材不仅能够增强视觉效果&#xff0c;还能显著提升受众的参与度。以下是一系列精选的全球视频素材网站&#xff0c;旨在…

3W 1.5KVDC 隔离单输出 DC/DC 电源模块 ——TPL-3W 系列

TPL-3W系列是一款额定功率为3W的隔离产品&#xff0c;国际标准引脚&#xff0c;宽范围工作温度–40℃ 到 105℃&#xff0c;在此温度范围内都可以稳定输出3W&#xff0c;并且效率非常高&#xff0c;高达88%&#xff0c;同时负载调整率非常低&#xff0c;对于有输出电压精度有要…

汇编语言——将DX,AX组成的32位数循环左/右移3位

文章目录 将DX&#xff0c;AX组成的32位数循环左移3位将DX&#xff0c;AX组成的32位数循环右移3位 将DX&#xff0c;AX组成的32位数循环左移3位 data segment data ends stack segment stacktop label worddw 100 dup (?) stack ends code segmentassume cs:code,ds:data,ss:s…

web前端网络相关知识

一、OSI 7层参考模型 1.物理层&#xff08;光纤、电缆等物理介质&#xff09; 传播比特流&#xff08;bit&#xff09; 01010101的形式 2.数据链路层&#xff08;交换机&#xff0c;mac地址&#xff09; 将比特流组合成字节&#xff0c;组合成帧&#xff0c;用mac地址访问&…

Opentelemetry——分析C++项目链接时循环依赖导致的错误

大纲 环境分析过程函数是否真的未定义是否有完整实现被谁编译代码是否被编译到静态库 链接出现了什么问题原因猜想 解决方案参考资料 在《Opentelemetry-Language APIs & SDKs-CGetting Started》一文中&#xff0c;介绍了如果编译一个可以发出Trace遥测数据的C项目。虽然过…