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

效果图

布局:

<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.mzph.cn/news/825077.shtml

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

相关文章

程序安装 - 笔记

1 程序IOServer,依赖自己开发libs7.so.如何安装程序 要安装依赖于自己开发的 libs7.so 的程序 IOServer,你需要执行以下步骤: 编译 IOServer 程序:确保 IOServer 程序的源代码处于可用状态,并且已经编译成可执行文件。这可能需要执行诸如 make 或者其他编译命令,具体取决…

The Sandbox 推出全新后室模板!

我们非常高兴地向你介绍游戏制作器的另一个新成员&#xff1a; 后室模板&#xff01; 步入神秘而不自然的空旷空间&#xff0c;感觉有些......不对劲。准备好探索、创造和拥抱引人入胜的后室世界吧。 什么是后室&#xff08;Backroom&#xff09;游戏&#xff1f; 早在 2019 年…

ChatGPT之道:巧用写作技巧

ChatGPT无限次数:点击直达 ChatGPT之道&#xff1a;巧用写作技巧 在当今快节奏的社会中&#xff0c;写作是一项非常重要的技能&#xff0c;不仅可以帮助我们有效表达思想&#xff0c;还可以提升个人能力和吸引力。而借助人工智能技术&#xff0c;如OpenAI推出的ChatGPT&#x…

获取公募基金持仓【数据分析系列博文】

摘要 从指定网址获取公募基金持仓数据&#xff0c;快速解析并存储数据。 &#xff08;该博文针对自由学习者获取数据&#xff1b;而在投顾、基金、证券等公司&#xff0c;通常有Wind、聚源、通联等厂商采购的数据&#xff09; 1. 导入必要的库&#xff1a; pandas 用于数据处理…

本地存储、自定义事件、全局事件总线

Vue 1.1 浏览器的本地存储 存储内容大小一般支持5MB左右&#xff08;不同浏览器可能还不一样&#xff09; 浏览器通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制 相关API: &#xff08;1&#xff09;xxxxStorage.setItem(key, value); 该方法接受一…

Java中类装载的执行过程

类装载的执行过程 类从加载到虚拟机中开始&#xff0c;直到卸载为止&#xff0c;它的整个生命周期包括了&#xff1a;加载、验证、准备、解析、初始化、使用和卸载这7个阶段。其中&#xff0c;验证、准备和解析这三个部分统称为连接&#xff08;linking&#xff09;。 1.加载 …

第一天学C++(C++入门)

一、HelloWorld &#xff08;第一个C入门程序&#xff09; 1.1代码 #include<iostream> using namespace std; // 1.单行注释// 2. 多行注释 /* main 是一个程序的入口 每个程序都必须有这么一个函数 有且仅有一个 */ int main() {// 第九行代码的含义就是在屏幕中输出…

果园系统养殖游戏喂养偷菜种植浇水养成小程序

装扮 通过购买装扮场景切换不同的农场风格 土地升级 通过特定的材料对土地和房屋进行升级 日志 记录道具的使用数量及金币农作物的收入情况 幸运转盘 可用金币进行抽奖 宝箱开启 获得宝箱后可以通过金币开启 每日签到 每日签到获得奖励 系统公告 可以第一时间知道游戏的更新和…

【安全】查杀linux挖矿病毒 kswapd0

中毒现象 高cpu占用&#xff0c;使用top命令查看cpu使用率长时间50%以上&#xff0c;cpu占用异常的进程八成就是挖矿病毒进程 此病毒隐藏了自己&#xff0c;top命令无法查看到挖矿病毒进程&#xff0c;可通过sysdig命令找到隐藏进程 安装sysdig curl -s https://s3.amazonaw…

2024年软件开发行业的薪资水平在下滑的原因?

下降的原因主要包括&#xff1a; 科技行业竞争加剧&#xff1a;随着科技行业竞争的加剧&#xff0c;企业为了压缩成本&#xff0c;开始降低程序员的薪资水平。 人才供应过剩&#xff1a;在计算机成为热门学科的同时&#xff0c;社会上出现了对IT业泡沫和虚假繁荣的质疑。大量…

go实现执行协成执行多个任务

大家对go语言陌生吗&#xff1f;大家有没有了解过关于go的协成呢&#xff0c;这里没有废话&#xff0c;直接上 使用go get 可以设置这个变量go env -w GOPROXYhttps://goproxy.io,direct 会使go get 更加快 package test_2import ("fmt""testing" )func w…

汉译英早操练-(十三)

hello大家好&#xff0c;这里是总想让你开心的hyssop。今天我们学点儿英语&#xff0c;填充下内心的空虚哈哈~ 不知道你拿起来一句话翻译的思路是什么&#xff0c;是应该用主动语态直抒胸臆&#xff0c;还是用被动语态强调部分&#xff1f;今天我们就来看看翻译大师李长栓老师对…

Redis数据库持久化方案

Redis数据库的持久化方案 Redis提供了两种主要的持久化方案&#xff0c;分别是RDB&#xff08;Redis DataBase&#xff09;和AOF&#xff08;Append Only File&#xff09;。 RDB&#xff08;Redis DataBase&#xff09; RDB是Redis默认的持久化方式&#xff0c;它按照一定的…

vue-textarea光标位置插入指定元素

vue-textarea光标位置插入指定元素 需求 点击插入关键字的时候把内容插入到光标所在的位置 效果图 实现 html <div class"temlate-container"><div class"template-content"><el-inputref"modelContent"v-model"mould.m…

(六)PostgreSQL的组织结构(1)-角色、数据库、schema

PostgreSQL的组织结构(1)-角色、数据库、schema 在 PostgreSQL 中&#xff0c;用户、数据库和 schema 是数据库管理和组织结构中非常基础且重要的概念。它们在定义数据库的访问权限、组织数据以及在多用户环境中管理数据方面起着核心作用。以下是每个概念的简要说明&#xff1…

全栈外包接单/远程工作(TS, React, Vue, Java, 移动端)

个人介绍 我毕业于中国某一本院校计算机专业&#xff0c;曾在北京大型软件公司从事Java开发多年&#xff0c;主要服务于全国各大头部985/211院校。后来为扩宽职业路径&#xff0c;转向了Ts全栈&#xff0c;现专注于远程外包接单工作&#xff0c;致力于打造一个能为客户带来优质…

windows命令行安装工具/包/软件后,命令行命令找不到(npm示例)

问题描述 在命令行安装工具&#xff0c;比如npm install, 或者windows自带的包管理工具&#xff0c;如Chocolatey&#xff0c;Scoop&#xff0c;WinGet等&#xff0c;安装软件后&#xff0c;然后直接在命令行运行上面安装的指令会提示命令找不到。这让经常使用linux&#xff0…

嵌入式学习56-ARM5(linux驱动启动程序)

知识零碎&#xff1a; bootm&#xff1a; 启动内核同时给内核传参 …

Ceph学习 -10.认证管理-秘钥管理

文章目录 1.秘钥管理1.1 基础知识1.2 简单实践1.3 小结 1.秘钥管理 学习目标&#xff1a;这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习。 1.1 基础知识 keyring 密钥环文件是“存储机密、密码、密钥、证书并使它们可用于应用程序的组件的集合”。 密钥…

hashcode与equals

如果两个对象相等,则hashcode一定也是相同的. 两个对象相等,两个对象分别调用equals方法都返回true 两个对象有相同的hashcode值,他们也不一定相等 因此,equals方法被覆盖后,则hashcode方法也必须被覆盖.