当前位置: 首页 > 编程日记 > 正文

CSS超出隐藏并且能滚动

效果图

实现CSS代码:

height: 500rpx;
overflow-x: hidden;
overflow-y: scroll;

效果图的代码:

<!-- 豆豆明细弹窗 --><view class="mxBoom" v-show="mxBoom"><view class="mxBoomContent"><view class="mxBoomTip">苗豆明细</view><view class="p_r mxTitle"><view class="">获取日期</view><view class="">详情</view><view class="">苗豆变更</view></view><view class="jiluList"><view class="p_r mxTxt" v-for="(item,index) in jiluList"><view class="">{{item.create_time}}</view><view class="">{{item.desc}}</view><view class="">{{item.values}}</view></view></view></view><image :src="xIcon" class="xIcon" @click="mxBoom=false"></image></view>

CSS

.mxBoom {position: fixed;width: 100vw;height: 100vh;z-index: 999;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);.xIcon {margin-top: 24rpx;width: 70rpx;height: 70rpx;text-align: center;position: relative;left: 50%;margin-left: -35rpx;}.mxBoomContent {width: 80vw;margin-left: 10vw;margin-top: 120rpx;height: 900rpx;background-color: #FFFFFF;border-radius: 40rpx;.jiluList {height: 500rpx;overflow-x: hidden;overflow-y: scroll;}.mxTxt {width: 90%;margin-left: 5%;height: 60rpx;line-height: 60rpx;text-align: center;border-bottom: 1rpx solid #F1F1F1;view {color: #333;font-size: 28rpx;width: 33%;text-align: center;}}.mxTitle {margin-bottom: 14rpx;width: 90%;margin-top: 50rpx;margin-left: 5%;text-align: center;border-bottom: 1rpx solid #d0d0d0;view {color: #dfb464;font-weight: 600;font-size: 32rpx;padding-bottom: 16rpx;width: 33%;}}.bolang {width: 100%;height: 22rpx;}.mxBoomTip {width: 100%;border-radius: 40rpx 40rpx 0 0;font-size: 50rpx;letter-spacing: 6rpx;font-weight: 600;text-align: center;background-color: $red;height: 230rpx;line-height: 230rpx;color: #fff;}}}

相关文章:

Oracle学习之段区块初步概念

段&#xff1a;一张表可以视为一个段 区&#xff1a;Oracle 给段分配空间的最小单位&#xff0c;表建好后&#xff0c;Oracle就会给表分配物理上连续的空间&#xff0c;叫做区 块&#xff1a;Oracle IO的最小单位&#xff0c;buffer cache中缓存的是dbf文件&#xff0c;由于dbf…

github充当服务器_如何创建充当链接HTML按钮

github充当服务器Sometimes you may want to use a button to link to another page or website rather than to submit a form or something like that. This is fairly simple to do and can be achieved in several ways.有时&#xff0c;您可能希望使用按钮链接到另一个页面…

provide和inject,Vue父组件直接给孙子组件传值

Provide / Inject 该页面假设你已经阅读过了组件基础。如果你还对组件不太了解&#xff0c;推荐你先阅读它。 通常&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;我们使用 props。想象一下这样的结构&#xff1a;有一些深度嵌套的组件&#xff0c;而深层的子组…

用欧几里得算法求最大公约数_欧几里得算法:GCD(最大公约数),用C ++和Java示例解释...

用欧几里得算法求最大公约数For this topic you must know about Greatest Common Divisor (GCD) and the MOD operation first.对于本主题&#xff0c;您必须首先了解最大公约数(GCD)和MOD操作。 最大公约数(GCD) (Greatest Common Divisor (GCD)) The GCD of two or more in…

eclipse 重启/打开内置浏览器

重启 Eclipse 重启选项允许用户重启 Eclipse。 我们可以通过点击 File 菜单选择 Restart 菜单项来重启 Eclipse。 Eclipse 内置浏览器 Web 浏览器 Eclipse 系统内部自带了浏览器&#xff0c;该浏览器可以通过点击 Window 菜单并选择 Show View > Other&#xff0c;在弹出来的…

JConsole的使用

一、JConsole是什么 从Java 5开始 引入了 JConsole。JConsole 是一个内置 Java 性能分析器&#xff0c;可以从命令行或在 GUI shell 中运行。您可以轻松地使用 JConsole&#xff08;或者&#xff0c;它更高端的 “近亲” VisualVM &#xff09;来监控 Java 应用程序性能和跟踪 …

折线图表动画(历史进程效果)

代码环境:uniapp 秋云uCharts图表组件https://demo.ucharts.cn/#/代码说明: 在插件市场导入插件秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场uCharts v2.3上线,支持nvue!全新官方图表组件,支持H5及APP用ECharts渲染图表,uniapp可视化首选组件

不要只是为您的代码做些毛-用Prettier修复它

Linting makes our lives easier because it tells us what’s wrong with our code. But how can we avoid doing the actual work that goes into fixing it?Linting使我们的生活更轻松&#xff0c;因为它告诉我们代码有什么问题。 但是&#xff0c;如何避免进行修复工作呢&…

循环语句(2)

for的嵌套 //99乘法表for (int a 1; a < 9; a)-----控制行{for (int i 1; i < a; i)------控制列{Console.Write(i "*" a "" (a * i) "\t");}Console.WriteLine();}Console.ReadLine(); 结果 打印星号 //直角在左上for (int i …

通过Shell脚本将VSS项目批量创建并且提交迁移至Gitlab

脚本运行环境&#xff1a;Git Bash 系统环境&#xff1a;Windows 10 Pro 1709 VSS版本&#xff1a;Microsoft Visual SourceSafe 2005 我的VSS工作目录结构如下&#xff1a; D:\work\ --vss ----project1 ------src ------README.md ------ ...... ----project2 ------doc ----…

样式集(11)注册页面样式,全部代码附效果图

效果图&#xff1a; 代码&#xff1a; <template><view class"page"><view class"top">新用户注册</view><image :src"sanjiao" mode"widthFix" class"sanjiao"></image><!-- <…

quickselect_QuickSelect:使用代码示例解释的快速选择算法

quickselect什么是QuickSelect&#xff1f; (What is QuickSelect?) QuickSelect is a selection algorithm to find the K-th smallest element in an unsorted list.QuickSelect是一种选择算法&#xff0c;用于在未排序的列表中查找第K个最小的元素。 算法说明 (The Algori…

《Linux命令行与shell脚本编程大全 第3版》Shell脚本编程基础---34

以下为阅读《Linux命令行与shell脚本编程大全 第3版》的读书笔记&#xff0c;为了方便记录&#xff0c;特地与书的内容保持同步&#xff0c;特意做成一节一次随笔&#xff0c;特记录如下&#xff1a;转载于:https://www.cnblogs.com/guochaoxxl/p/7894620.html

CSS超出部分隐藏,显示滚动条

实现功能&#xff1a; 固定一个高度&#xff0c;超出该高度的部分就隐藏&#xff0c;并且显示滚动条能上拉下滑滚动 实现代码&#xff1a; height: 500rpx; overflow-x: hidden; overflow-y: scroll; 实现功能&#xff1a; 固定一个宽度&#xff0c;超出该宽度的部分就隐藏…

第二周学习进度

好久的编程实现&#xff0c;居然没有编完整&#xff0c;看来自己需要加班学习了&#xff01;第二周学习进度如下&#xff1a; 第二周所花时间&#xff08;包括上课&#xff09;共计21小时代码量&#xff08;行&#xff09;220博客量&#xff08;篇&#xff09;4了解到的知识 1.…

如何在C ++中从容器中删除元素

How to remove elements from container is a common C interview question, so you can earn some brownie points if you read this page carefully. 如何从容器中删除元素是C 常见的面试问题&#xff0c;因此&#xff0c;如果仔细阅读此页&#xff0c;可以赚取布朗尼积分。 …

【BZOJ4282】慎二的随机数列 乱搞

【BZOJ4282】慎二的随机数列 Description 间桐慎二是间桐家著名的废柴&#xff0c;有一天&#xff0c;他在学校随机了一组随机数列&#xff0c; 准备使用他那强大的人工智能求出其最长上升子序列&#xff0c;但是天有不测风云&#xff0c;人有旦夕祸福&#xff0c;柳洞一成路过…

git phpstorm 配置

http://jingyan.baidu.com/album/a948d65105faed0a2dcd2ea2.html?stepindex2&st2&os0&bd_page_type1&net_type3 http://jingyan.baidu.com/article/20095761cbef40cb0721b417.html转载于:https://www.cnblogs.com/fyy-888/p/5272862.html

CSS动画无限循环

实现代码 div{animation:myanimation 5s infinite; }keyframes myanimation {from {top:0px;}to {top:200px;} } 注:animation ->Css3动画属性 myanimation->随便命名 infinite 可重复 ,去掉就不重复了 top可以改为宽高,或者方向等等任何CSS属性 form 开始 to结束…

apple id无法创建_我如何为我的Apple收藏夹创建网站

apple id无法创建A while ago I started an Apple collection. Ive been following Apple hardware (and its aesthetics) since I was a teenager, but at that time I didnt the have money to own a Mac. 前一段时间&#xff0c;我开始了一个苹果系列。 从我十几岁起我就一直…

bzoj1562[NOI2009]变换序列——2016——3——12

任意门&#xff1a;http://www.lydsy.com/JudgeOnline/problem.php?id1562 题目&#xff1a; 对于0,1,…,N-1的N个整数&#xff0c;给定一个距离序列D0,D1,…,DN-1&#xff0c;定义一个变换序列T0,T1,…,TN-1使得每个i,Ti的环上距离等于Di。一个合法的变换序列应是0,1,…,N-1的…

把view或者div绘制 canvas ,导出图片功能实现完整源码附效果图(兼容H5和小程序)

先看下效果图&#xff1a;&#xff08;上面灰色块内的用div和CSS写出来的&#xff0c;然后绘制到canvas&#xff09; 实现此功能需要使用到一个微信小程序的插件&#xff0c;插件官方文档地址&#xff1a; wxml-to-canvas | 微信开放文档 本博客代码环境&#xff0c;uniapp&a…

C 语言中的 switch 语句 case 后面是否需要加大括号

事件原由为编辑器的自动缩进&#xff0c;当 case 换行后不自动缩进。 于是在在想可以可否在 case 后面再大括号&#xff0c;让其自动缩进。 查了资料&#xff0c;发现 case 是可以加大括号的&#xff0c;相当于代码块。 而且还有另外一个用途&#xff0c;可以代码块头部定义变量…

问题 c: 插入排序_插入排序:它是什么,以及它如何工作

问题 c: 插入排序Insertion sort is a simple sorting algorithm for a small number of elements.插入排序是一种针对少量元素的简单排序算法。 例&#xff1a; (Example:) In Insertion sort, you compare the key element with the previous elements. If the previous ele…

在Java连接hbase时出现的问题

问题1&#xff1a; java.net.ConnectException: Connection refused: no further information zookeeper.ClientCnxn: Session 0x0 for server null zookeeper未启动&#xff0c;或无法连接&#xff0c;从查看各节点zookeeper启动状态、端口占用、防火墙等方面查看原因。问题2&…

codeforces 8C. Looking for Order 状压dp

题目链接 给n个物品的坐标&#xff0c; 和一个包裹的位置&#xff0c; 包裹不能移动。 每次最多可以拿两个物品&#xff0c; 然后将它们放到包里&#xff0c; 求将所有物品放到包里所需走的最小路程。 直接状压dp就好了。 #include <iostream> #include <vector> #…

H5刷新当前页面

location.reload();

sql的外键约束和主键约束_SQL主键约束用示例解释

sql的外键约束和主键约束A primary key is a column or a set of columns that uniquely identifies each row in a table.主键是一列或一组列&#xff0c;它们唯一地标识表中的每一行。 It’s called a “constraint” because it causes the system to restrict the data al…

str.format() 格式化字符串函数

语法 它通过{}和:来代替%。 “映射”示例 通过位置 In [1]: {0},{1}.format(kzc,18) Out[1]: kzc,18 In [2]: {},{}.format(kzc,18) Out[2]: kzc,18 In [3]: {1},{0},{1}.format(kzc,18) Out[3]: 18,kzc,18字符串的format函数可以接受不限个参数&#xff0c;位置可以…

css学习任务二:切图写代码

今天的任务是根据UI给的图进行切图&#xff0c;然后写出相应的页面&#xff0c;UI如下&#xff1a; 收获&#xff1a;学习前端知识一年有余&#xff0c;却因为老是找不到实战项目而得不到实际的提高&#xff0c;直到今天的学习我才知道切图是怎么一回事&#xff0c;明白了你看到…