行为 滚动 Navigation drawers 可以垂直滚动，独立于屏幕内容和 UI 的其余部分。...如果导航目的地列表长于 drawer 的高度，则 drawer 的内容可以在 drawer 内滚动。 ?...滚动 Bottom navigation drawers 一旦打开至全屏高度，就可以在内部滚动。 当最初打开到屏幕高度的50％时，在显示其他项目之前，必须将 drawer 拖到屏幕高度。...在滚动时，drawer 的标题变成了一个高的 top app bar，并具有很好的可供性。 ?...全屏时才能内部滚动 Content hierarchy（内容层级） 由于 bottom navigation drawer 内容项的数量一开始并不全部可见，因此 drawer 的内容应按以下顺序排列：
而要实现沉浸式效果，则需要设置组件绘制内容突破安全区域的限制。...，再通过接口getWindowAvoidArea()和on('avoidAreaChange')获取并动态监听安全区域的高度信息，手动进行避让。...窗口全屏布局方案沉浸式适配示例设置窗口强制全屏布局。详情见FullScreenImmersive.ets。.... // 设置窗口强制全屏布局 windowClass.setWindowLayoutFullScreen(true); ...})获取状态栏和导航条的高度。...滚动场景使用窗口全屏布局方案进行沉浸式适配时，尾项不从导航条底部出现。
前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。上一篇推送为大家总结了居中布局和多列布局，今天为大家讲解一下等分布局和全屏布局。...（2）代码实例 (3)优缺点 缺点:兼容性存在较大的问题 全屏布局的特点 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域 浏览器变大时，撑满窗口 全屏布局的方法 1）使用position...（2）代码实例 (3)优缺点 优点：兼容性好，ie6下不支持 2）使用flex （1）原理、用法 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局...（2）代码实例 (3)优缺点 缺点：兼容性差，ie9及ie9以下不兼容 1）使用flex （1）原理、用法 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局...（2）代码实例 全屏布局相关方案的兼容性、性能和自适应一览表 方案 兼容性 性能 是否自适应 Position 好 好 部分自适应 Flex 较差 差 可自适应 Grid 差 较好 可自适应 原文作者
4.7寸 iPhone iPhone X 对于具有自定义布局的应用，支持iPhone X也应该比较容易，特别是如果您的应用使用自动布局并遵守安全区域和边距布局指南。...确保背景延伸到显示器的边缘，并且垂直可滚动的布局（如表格和集合）一直延续到底部。 插入必要内容以防止剪辑。...所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。 注意状态栏的高度。...如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方，则必须更新您的应用，才能根据用户的设备动态定位内容。...iPhone X具有不同于4.7 寸iPhone的长宽比，因此，全屏4.7 寸iPhone图形在iPhone X上全屏显示时出现裁剪或letterboxed。
关键词：沉浸式、安全区域、通知栏、导航栏 在移动应用开发中，应用在默认情况下窗口背景绘制范围是全屏，但UI元素被限制在安全区内（自动避开状态栏和导航栏）进行布局，来避免界面元素被状态栏和导航条遮盖（即状态栏与导航栏区域为非安全区...编辑目录方案一 设置主窗口或子窗口的布局为沉浸式布局 设置窗口沉浸式 保存状态栏与导航栏高度 避让状态栏或导航栏 场景1 滚动容器不重叠非安全区场景2 滚动容器重叠非安全区方案二 设置安全区域 expandSafeArea...属性达到沉浸式场景1 滚动容器不重叠非安全区场景2 滚动容器重叠非安全区效果场景3 图片视频场景方案一 设置主窗口或子窗口的布局为沉浸式布局该种方式会将整个 ability 中展示的页面都变为全屏展示效果...避让状态栏或导航栏页面使用 StorageProp 获取导航栏与通知栏高度并进行避让，并自行调节布局达到滚动时是否与通知栏或导航栏重叠效果场景1 滚动容器不重叠非安全区给滚动控件的父控件设置内边距即可，...编辑编辑场景3 图片视频场景针对于图片或视频内容，我们对页面安全区进行延申后，图片还是距离屏幕顶部存在状态栏的高度，同理，我们只需要给 Image 组件设置向上延申安全区的效果即可。
、滑动事件处理、参数设定等等 RefreshContent 对不同内容的统一封装，包括判断是否可滚动、回弹判断、智能识别 RefreshHeader 下拉头部的实现和显示 RefreshFooter 上拉底部的实现和显示...通过SmartRefreshLayout框架，你可以在一个稳定强大的下拉布局中实现自己项目需求的 Header ，不用去关心滑动事件处理，不用关心子控件的回弹和滚动边界，只需关注自己真正的项目需求Header...Screen 全屏幕 和 Translate 平行移动 ?...我们注意看右边的图，仔细观察手指触摸的位置和下拉效果。可以看到在列表已经滚动到中部时，轻微下拉列表是不会触发刷新的，但是如果是触摸固定的布局，则可以触发下拉。...支持设置多种滑动方式来适配各种效果的Header和Footer：位置平移、尺寸拉伸、背后固定、顶层固定、全屏 支持内容尺寸自适应 Content-wrap_content 支持继承重写和扩展功能，内部实现没有
网格列表 网格列表（Grid lists） 网格列表是标准列表视图的替代方法。 Grid lists由以垂直和水平布局排列的cell重复后组成。 Grid lists最适用于同质数据类型。...Lists：针对阅读理解进行了优化，特别是在比较一组包含多种数据类型的数据时。 Cards：用于格式不一致的内容，例如带有可变长度标题的照片或具有异质内容的数据集，例如照片，视频和书籍的混合集合。...全屏的grid list会调整大小以适应屏幕宽度。 水平空间收缩时，grid list不会转换为list。grid list和list是用于强调不同数据类型的独立结构。...响应式设计 全屏grid lists应该使用Ratio Keylines导出的具有最小和最大宽度的流体图像比率。他们应该保留固定的高度，margins和padding。...居中的grid lists具有最小宽度的fluid margins。它们保持固定的图像宽度，高度和padding。 margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
正是由于以上两点，设计师设计的时候，大胆创新，设计成了全屏自适应、半响应、类PC软件风格(内滚动)的管理站点，下图为上面老页面同样数据的新测试页面截图： 回到内滚动布局本身。...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： 对于黑色半透明覆盖层，传统实现是这样的：如果要兼容IE6浏览器...随意改变滚动容器最大的问题在于，当存在覆盖层的时候，会影响背后页面内容的滚动。...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？...我相信，这种交互形式以及web布局上的创新一定会带来很多正面的反馈和积极的影响，产品即将上线，我们可以拭目以待。 内滚动布局，更现代，更移动，如果您的项目合适，不妨也试试这种看似新颖的布局方式。
QMUIObservableScrollView 可以监听滚动事件的 ScrollView，并能在滚动回调中获取每次滚动前后的偏移量。...每个 Tab 都可以非常灵活的配置，内容上支持文字和 icon 的显示，icon 支持选中态，支持内容的排版对齐方向设置，支持显示红点，支持插入自定义的 View，支持监听双击事件等。...获取屏幕信息，包括屏幕密度、屏幕宽度和高度、状态栏高度、ActionBar 高度等。...获取设备硬件信息，包括是否有可用摄像头、是否有硬件菜单、是否有网络、SD Card 是否可用、当前选择的国家语言等。 判断当前是否处于全屏状态，控制进入/退出全屏状态。...提供多个常用的工具方法，如获取状态栏高度、判断当前是否全屏等等。
正是由于以上两点，设计师设计的时候，大胆创新，设计成了全屏自适应、半响应、类PC软件风格(内滚动)的管理站点，下图为上面老页面同样数据的新测试页面截图： ? 回到内滚动布局本身。...无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...随意改变滚动容器最大的问题在于，当存在覆盖层的时候，会影响背后页面内容的滚动。...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...我相信，这种交互形式以及web布局上的创新一定会带来很多正面的反馈和积极的影响，产品即将上线，我们可以拭目以待。 内滚动布局，更现代，更移动，如果您的项目合适，不妨也试试这种看似新颖的布局方式。
因此对于一般的界面，如列表页，tab页等具有大量内容的页面应该是不推荐将状态栏隐藏，不然反而让信息显得不完整。但是一些追求沉浸体验的页面，如视频浮层、图片浮层例外。...OK，那么我们该如何适配状态栏高度呢？首先，假如之前代码中控件布局将状态栏高度写死20pt，那么很高兴地告诉你，以前挖过的坑，现在跪着也要填完。...，当我们在全屏界面隐藏了状态栏之后，statusBarFrame获取到的size为0，可能会出现控件布局错乱，因此最稳妥的方法还是判断是否iPhone X返回一个常数，如下所示。...那么我们到底要不要在该区域展示界面内容呢？根据官方设计规范，我们需要将界面内容分为两类：纯展示类的和可交互类的。...，那就是到底要不要修改toolbar的高度，如下面输入面板中表情滑动条的高度，根据内部适配规范我们只是把它往上提而不修改其高度，但这看上去悬空的感觉可能会有点奇怪。
与顶层容器不同的是，面板不能独立存在，必须被添加到其他容器内部。在进行界面设计时，通常将用户界面划分成若干个区域，每个区域用一个面板。这样处理的好处是：将窗口内容结构化，有利于管理、更换、调试。...) 设置组件的宽度和高度，单位是像素 表12.3中列举了JPanel类常用方法，接下来演示JPanel的使用，如例12-3所示。...在第14行代码，通过“new TitleBorder("面板区域");”设置了JPanel的边框和标题。 JScrollPane是一个带滚动条的面板容器，只能放置一个组件，并且不能使用布局管理器。...它由下列部分组成：一个ViewPort、可选的垂直和水平滚动条、可选的行和列的头部，以及ViewPort对应显示的组件。...例12-4运行结果 案例12-4中，在JTextArea文本区域组件不断输入内容回车，当内容超出滚动面板宽度和高度的时候，JScrollPane会出现横向和纵向滚动条。
），自定义交互（通过method和event）以及自定义组件布局（layout）。...默认布局为左侧是任务信息列表，右侧是甘特图时间线，自定义布局可在右侧、下方显示更多信息。 自定义布局可显示资源列表和资源的甘特图时间线，但仅Pro版本可用。...grid - 定义甘特图的表格，显示任务的表格ID为grid; timeline - 定义时间线，显示任务时间线ID为"timeline"; scrollbar - 滚动条（表格和时间线）....autoscroll_speed 自动滚动的速度 默认为30ms。...如果设置为xy，则竖直内容不足屏幕，则面板将缩小至其高度，水平内容超过屏幕，则截断无滚动条。
正是由于以上两点，设计师设计的时候，大胆创新，设计成了全屏自适应、半响应、类PC软件风格(内滚动)的管理站点，下图为上面老页面同样数据的新测试页面截图： ? 回到内滚动布局本身。...实际上，内滚动布局还会带来带有质变性质的一些特性。 无法滚动的弹出层 基本上，是个像样的web2.0网站都会有弹框web组件，一个黑色半透明的overlay层，上面摇曳着弹框面板，例如这样的： ?...随意改变滚动容器最大的问题在于，当存在覆盖层的时候，会影响背后页面内容的滚动。...传统布局下的弹框，如果高度很高，直接设置弹框容器position:absolute就可以愉快地上下翻滚了。但是，在内滚动布局下，弹框根本就不在滚动容器里面，翻滚一说从何谈起？ 大危机！怎么办！？ ?...我相信，这种交互形式以及web布局上的创新一定会带来很多正面的反馈和积极的影响，产品即将上线，我们可以拭目以待。 内滚动布局，更现代，更移动，如果您的项目合适，不妨也试试这种看似新颖的布局方式。
如果你的的应用程序具有自定义布局，那么支持 iPhone X 也应该比较容易。如果你的应用程序使用 Auto Layout 并且遵守安全区域和边距布局指南的话。...提供全屏体验。要确保背景延伸到屏幕的边缘，并且垂直可滚动的布局（例如表格或集合）能够一直延续到底部。 ? 插入必要内容以防止裁剪。...所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。 注意状态栏的高度。...iPhone X 上的状态栏比其他 iPhone 上的更高。如果你的应用程序的状态栏高度比默认状态栏高，那么你必须更新自己的应用程序，这样才能动态的根据用户设备定位内容。...iPhone X 和 4.7 英寸 iPhone 的长宽比具有比较大的差异，因此当全屏时， 4.7 英寸的 iPhone 图形会在 iPhone X 上出现裁剪或者 letterboxed。
通过监听滚动事件，当用户滚动到页面底部时自动加载更多内容，这个库让页面的内容呈现变得更加流畅和自然。...高度可定制：支持自定义加载提示、结束提示等，满足不同应用场景下的视觉需求。 性能优化：合理的事件处理和状态更新机制，确保滚动的流畅性，即使在内容非常多的页面上也不会影响性能。...应用场景 社交媒体平台：动态加载用户的动态、评论或图片，提升浏览体验。 新闻和内容聚合网站：文章或视频列表滚动到底部时自动加载更多内容。 电商平台：在商品列表页实现无限滚动，无缝展示更多商品。...React Split Pane库允许开发者在React应用中创建可拖拽的分割面板布局，实现多个可调整大小的区域。...React Split Pane的特性 可拖拽的分割线：用户可以通过拖拽分割线来调整面板大小，实现高度灵活的布局调整。 方向灵活：支持水平和垂直两种分割方式，可以根据需求设计布局结构。
页面显示在浏览文件时，可以选择不同的页面显示，或利用缩放菜单，可对显示内容进行缩放，以达到更好的浏览效果。...单页视图 窗口只显示一页启用滚动 窗口的页面可连续滚动双页视图 窗口并排显示两页双页滚动 窗口并排显示两页,连续滚动可点击图片放大查看阅读模式 与 全屏模式在阅读模式下，可以隐藏所有工具栏和任务窗格，以最大化屏幕上的查看区域...在全屏模式下，将只显示文档；菜单栏、工具栏、任务窗格和窗口控件都将处于隐藏状态。...可点击图片放大查看查看 PDF 的首选项“首选项”对话框定义了默认的页面布局和用很多其它方法自定义您的应用程序。要查看 PDF，请检查文档、全屏、一般、页面显示和 3D 和多媒体首选项中的选项。...导览窗格：导览窗格是一个可以显示不同导览面板的工作区，在左侧窗格显示。工具窗格：Acrobat 右侧窗格显示常用工具。工具栏项目：工具栏显示常用的工具图标，在文档窗格的上端。可点击图片放大查看3.
高度适配是根据用户屏幕窗口发生变化达到一个界面适配，比如使用vh;其实个人认为没必要做高度适配、都根据宽度vw达到一个界面适配就好了，主要是因为做高度适配得话使用vh，再小点得屏幕上 很容易就发生文本重叠...大屏界面布局 其实一般大屏布局会又一个header（主标题、时间展示）、side （副标题：屏幕的两侧可能会分为4块4个维度去展示当前屏的一些信息）、main(大屏主视图)、footer（底部）。...const getTime = () => moment().format('HH:mm:ss');复制代码全屏 全屏功能再大屏中也是必要的功能，下面提供一份全屏相关的函数。...// fullscreen.js// element 是尼的全屏的容器， 进入全屏export function fullscreen(element) { if (element.requestFullscreen...不然测试会给尼提bug的; 动画 针对数字滚动可以使用 vue数字滚动组件 react数字滚动组件 我比较常用的css animate动画库; 里面比较丰富渐入、渐出等等；
实现逻辑 获取页面可以滚动的高度. 获取页面已经滚动的高度....阅读进度=已经滚动的高度/页面可以滚动的高度 代码 单独定义一个 react hook 来活动当前的阅读进度 import { useEffect, useState } from 'react' export...[progress, setProgress] = useState(0) useEffect(() => { function updateScroll() { // 已经滚动的高度...const currentScrollY = window.scrollY // 可以滚动的高度 let scrollHeight = document.body.scrollHeight...进度为 0 向左偏移 100% ，进度为 100 偏移 0，所以使用 translateX(${progress - 100}%) 以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得
下面是设置工作簿视图和窗口的一些VBA代码。 工作簿视图 可以选择使用普通视图、页面布局视图、分页预览视图来显示工作表。...= True '关闭全屏模式 Application.DisplayFullScreen = False 活动窗口的位置和大小 示例代码： '设置活动窗口的位置和大小 With ActiveWindow....Top = 0 .Left = 0 .Width = 400 .Height = 300 End With 居中活动窗口 示例代码： '居中活动窗口 '获取最大宽度和高度...= True End With '当滚动工作表时第1行和第2行保持可见 '在第1列冻结活动窗口中的活动工作表 '即第1列被冻结 With ActiveWindow .SplitRow = 0...= 2 .SplitColumn = 1 .FreezePanes = True End With 当冻结活动窗口的拆分窗格后，在滚动工作表时被冻结的列和行将保持可见。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
