当面板滑动打开时保持滚动位置 - 腾讯云开发者社区

比如 AndroidStudio 的文件树和编辑器区域，当宽度较窄时，水平方向通过拖拽底部滚动条来滚动视口。...除此之外，最难的一点是计算出内容宽度的临界值，也就是说，当约束的宽度尺寸小于哪个值时，允许进行拖拽滑动。因为如果宽度够大，是没必要拖拽滑动的。...这里很明显，当面板的宽度约束小于文字的最大宽度时，需要通过滚动来查看宽度之外的视图。...也有由于这一点，之前一直没能实现区域视口双向滑动的功能。下面是在竖直方向上 ScrollBar 构造时存在的一行代码：可以只监听竖直滚动的通知，忽略水平方滚动向通知。...如下所示，蓝色区域内有一行文字，当窗口宽度缩小到文本溢出时，底部会呈现滑动条支持水平滑动：这里先总结一下实现区域视口的双向滚动的步骤: 需要两个可滑动的视口: SingleChildScrollView

5262 0

UGUI Scrollrect滚动优化：无限循环利用

如图所示图中红色框是可视区，可视区一共可显示4个item，后置准备1个item.当向左滑，0号滑出可视区，4号进入可视区，把0号GameObject位置放在滑动面板最后，如同所示同时更新滑动面板大小...2 详细设计 2.1 初始化滑动面板 void InitValue() { if (ConstraintCount <= 0) ConstraintCount...startPos = mTrans.localPosition; } 1.得到显示区域的4个顶点的世界坐标 2.当产生滚动时，添加滚动委托 2.2 重置滑动面板大小 void UpdateRectsize...，每次遍历所有的创建的GameObject（这里是5个） 2.当水平向左滑动时，当GameObject超过可视区的最左边，把它放在可视区的最右边的预备显示位置，如图所示，0号GameObject从最前变为最后...同时增加滑动面板大小，和0号GameObject的信息显示（把0置为5） 3.当水平向右滑动时，当当GameObject超过可视区的最右边，把它放在可视区的最左边的预备显示位置，如图所示，0号GameObject

3593 0

您找到你想要的搜索结果了吗？

是的

没有找到

小程序提升界面使用体验　丰富了内容展示组件

以下是相关能力的展示 01—提升界面使用体验小程序可以灵活调整顶部标题栏的颜色，同自己的页面保持色彩统一。小程序可以获取页面布局，了解用户屏幕滑动情况，并使用页面滚动接口。...例如看到一半的文章，开发者可以定位并记住浏览的位置。在用户下次打开小程序时，立即滚动到未读处，方便用户继续阅读。地图、视频和画布上，现在可以展示简单的图片及文字，帮助用户更好地使用这些功能。...03—完善系统硬件能力在需要时，小程序可以让用户手机屏幕保持亮起，不操作手机也不用担心锁屏。截屏事件通知。当用户在小程序中截屏保存了敏感信息时，开发者可以提醒用户注意隐私安全。...中 backgroundColor 在 Android 设置错误问题 F 修复框架背景音频播放在打开多个小程序时会被 kill 的问题 A 新增 vConsole 加入 WXML 面板工具更新...(0.19.191100)： A 新增基础库 1.4.0 调试支持 A 新增性能 Trace 工具 A 新增 Win 菜单栏 hover 时改变背景色 F 修复全局搜索结果页切换标签回来滚动位置不应回到顶部的问题

1.7K8 0

Axure高保真教程：鼠标滚动上下翻页效果

这要就即可以有滚动效果，但是又不出现滚动条。 2. 设置交互 1）向下滚动的交互鼠标向下滚动时，按理来说，我们只需用设置面板状态的交互，就能将图片设置到下一个页面。...设置到下一页，这里需要增加向上滑动的动画，动画时间可以自己设置，案例中是1秒。...然后等待1秒时间，这里等待时间和动画时间应该一致。我们在把开关的值设置为0，这样就相当于重新打开开关可以继续滚动切换图片。...这里我们要在动态面板内矩形上增加一个锚点，可以用透明的矩形去中，把锚点放在矩形中间的位置就是高10000点的位置，然后让滚动条默认滚动到中间锚点的位置，这样向上向下滚动都没有问题了。...3）动态面板载入时前面讲到我们设置了中部锚点，要让滚动条默认滚动到中间锚点的位置。所以在载入时，我们要用滚动到锚点的交互，让滚动条滚动到中部的位置。

1451 0

微信小程序开发学习笔记（二）——小程序框架、组件、WXML

number/string 否设置竖向滚动条位置 1.0.0 scroll-left number/string 否设置横向滚动条位置 1.0.0 scroll-into-view string...设置哪个方向可滚动，则在哪个方向滚动到该元素 1.0.0 scroll-with-animation boolean false 否在设置滚动条位置时使用动画过渡 1.0.0 enable-back-to-top...boolean false 否 iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。...2.7.3 scroll-anchoring boolean false 否开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS...1.0.0 bindscrolltolower eventhandle 否滚动到底部/右边时触发 1.0.0 bindscroll eventhandle 否滚动时触发，event.detail

2K4 0

Vcl控件详解_c++控件

OnOpen：打开动画时触发 OnStart：开始动画时触发 OnStop：停止动画时触发 TDateTimePicker 属性 CalAlignment：当列出下拉框时，它是左边对齐还是右边对齐...OnCloseUp：当关闭下拉框时触发 OnDropDown：当打开下拉框时触发 OnUserInput：当用户输入时触发 TMorthCalenBar 属性 CalColors...SetBounds：设置控件的上，下，左，右的位置事件 OnDrawPanel：当面板需要重新绘制时触发 OnCreatePanelClass：当一个面板需要创建时触发 OnHint...当拖动页滚动组件上的箭头时，页滚动组件滚动 Margin：被控控件与该控件的距离 Orientation：设置该控件的方向 Position：确定页流离颠沛滚动组件的滚动位置方法...GetButtonState：返回按钮的状态 Scroll：页滚动组件滚动前立即产生事件 OnScroll：当滚动时触发 TCommBoBoxEx 属性 DropDownCount

4.9K1 0

Visual Studio Code 快捷键 Mac 版

⌃PgDown 滚动到行头/行尾 ⌘PgUp /⌘PgDown 滚动到页头/页尾 ⇧⌘[ / ⇧⌘] 折叠/展开区域 ⌘K ⌘[ / ⌘K ⌘] 折叠/展开所有子区域 ⌘K ⌘0 / ⌘K ⌘J 折叠...⌘S 保存 ⇧⌘S 保存为… ⌥⌘S 保存所有 ⌘W 关闭 ⌘K ⌘W 关闭所有 ⇧⌘T 重新打开已关闭的编辑器 ⌘K 输入保持打开 ⌃Tab / ⌃⇧ 选项卡打开下一个/上一个 ⌘K P 复制活动文件的路径.../终端 ⇧⌘U 显示输出面板 ⇧⌘V 切换Markdown预览 ⌘K V 打开Markdown预览到一边调试 Mac 快捷键介绍 F9 切换断点 F5 开始/继续 F11 / ⇧F11 跳进/出...暂停 ⌘K ⌘I 显示悬停集成终端 Mac 快捷键介绍 ⌃` 显示集成终端 ⌃⇧` 创建新终端 unassigned（末分配）复制选择 unassigned（末分配）粘贴到活动终端 ⌘↑ 向上滑动...⌘↓ 下身滑动 PgUp 向上滚动页面 PgDown 向下滚动页面 ⌘Home 滚动到顶部 ⌘End 滚动到尾部 G M T Detect

1.7K3 1

Visual Studio Code快捷键

Fn + ← End Fn + → ⇥ 右制表符（Tab键） ⇤ 左制表符（Shift+Tab） ⎋ Escape (Esc) ⏏ 电源开关键常用 Mac 快捷键说明 ⇧⌘P, F1 显示命令面板...⌘S 保存 ⇧⌘S 保存为… ⌥⌘S 保存所有 ⌘W 关闭 ⌘K ⌘W 关闭所有 ⇧⌘T 重新打开已关闭的编辑器 ⌘K 输入保持打开 ⌃Tab / ⌃⇧ 选项卡打开下一个/上一个 ⌘K P 复制活动文件的路径.../终端 ⇧⌘U 显示输出面板 ⇧⌘V 切换Markdown预览 ⌘K V 打开Markdown预览到一边调试 Mac 快捷键说明 F9 切换断点 F5 开始/继续 F11 / ⇧F11 跳进/出...暂停 ⌘K ⌘I 显示悬停终端 Mac 快捷键介绍 ⌃` 显示集成终端 ⌃⇧` 创建新终端 unassigned（末分配）复制选择 unassigned（末分配）粘贴到活动终端 ⌘↑ 向上滑动...⌘↓ 下身滑动 PgUp 向上滚动页面 PgDown 向下滚动页面 ⌘Home 滚动到顶部 ⌘End 滚动到尾部

8.8K2 0

两万字：讲述微信小程序之组件

当打开某款小程序后，界面中的图片、文字等都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择属性设计出不同的界面效果。...，当我们开打开发者工具时看到的时样式1，但是当我们点击样式1的时候会变化成样式2的效果。...否点击键盘右下角按钮时是否保持键盘不收起1.1.0cursornumber是指定 focus 时的光标位置1.5.0selection-startnumber-1否光标起始位置，自动聚集时有效，需与 selection-end...boolean false 否点击键盘右下角按钮时是否保持键盘不收起 1.1.0 cursor number 是指定 focus 时的光标位置 1.5.0 selection-start number...boolean false 否点击键盘右下角按钮时是否保持键盘不收起 1.1.0 cursor number 是指定 focus 时的光标位置 1.5.0 selection-start number

3.9K2 0

Axure RP9中文版，交互式原型设计软件Axure RP 9永久版下载安装

这里你们也可以用拖动事件，增加判断条件，当拖动到指定位置时才增加，这里作者为了方便就做在鼠标单击时。你们可以根据自己需要的效果来设置。 2....、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块，所以我们要动态面板里应该要有13个对应的状态。...注意，考虑到如果添加的元件太多，就会有一个长页面，所以我们可以通过把中继器转为动态面板增加滚动条，同时可以用设置锚点的交互，这样可以在新增元件的时候，将页面滚动到最下方，就是最新的位置。...2）交互设置中继器没每项加载时，我们用设置面板状态的交互，将动态面板设置到状态面和type列的值对应的页面。鼠标单击关闭按钮时，我们用删除行的交互，将当前行的内容删除。...当背景矩形被选中时，我们先用显示的交互，将右侧元件属性的组合显示，并且用设置面板状态的交互，让右侧元件属性显示对应页面的内容。 3.

4.9K4 0

安卓Chrome使用技巧合辑

同时，这一特性也适用于菜单项上方的导航按钮，因为Chrome的菜单键和菜单弹出后的"刷新按钮"位置是重合的，所以按住菜单按钮后保持一秒左右再松开，可以进行刷新网页的操作。　　2....在"页面内查找"界面，手指按住并上下滑动右边的"黄色条"即可快速定位到各个搜索关键字所在位置。　　8....双击屏幕，在第二次点击屏幕时按住屏幕不放，以双击屏幕的位置定为原点，把手指向三象限或者四象限方向滑动，即可以原点为中心，快速放大页面，如果想要缩小页面，只需要双击屏幕，在第二次点击屏幕时把手指向一象限或者二象限方向滑动...下拉刷新效果设置: 　　chrome://flags/#disable-pull-to-refresh-effect 　　此项可定义当页面垂直滚动至最顶端时，继续下拉网页是否触发自动刷新。...在此模式下上划"指示手柄"可以划出快速操作面板，在此面板中，可以进行查看书签，查看历史记录等操作(此功能目前不稳定，可能出现Bug)。　　6.

9.6K3 0

微信小程序示例 - 视图容器

只可放置组件，其他节点会被自动删除属性名称作用 indicator-dots 是否显示面板指示点 autoplay 是否自动切换 current 当前所在页面的 index...interval 自动切换时间间隔 duration 滑动动画时长 bindchange 滑动后的触发事件可滚动视图区域 scroll-view 代码结构属性名称作用 scroll-x、scroll-y 允许横向、纵向滚动 upper-threshold、lower-threshold 距顶部/左边（底部/右边）多少px...时，触发 scrolltoupper 事件 scroll-top、scroll-left 设置竖向/横向滚动条位置 scroll-into-view 滚动到指定ID的元素 bindscrolltoupper...事件处理：滚动到顶部/左边 bindscrolltolower 事件处理：滚动到底部/右边 bindscroll 事件处理：滚动视图容器 view 代码结构没有固定结构，比较随意，可以包裹其他组件

1.1K8 0

Unity基础（24）-UGUI

Color：颜色 Material：材质 Raycast Target：来自类Graphic，当该项为false时，消息会透传 ?...//（指定可滚动的位置数量） Numbers Of Steps：滚动条可滚动的位置数目，为0和1时不生效（事实上只有0个可滚动位置或1个可滚动位置那还叫滚动条吗），例如设为2，则拖动滚动条时滚动条只会处在最小值的位置和最大值的位置...，因为他的可滚动位置只有2个，例如设为3，则拖动滚动条时滚动条只会处在最小值的位置、最大值的位置以及中间位置，因为他的可滚动位置只有3个。...） Auto Hide and Expand Viewport 自动隐藏并扩展视图 ( Spacing 滑动区域和滚动条的间距) ) ?...scrollview理论上是支持无限多个item单元（即滚动的单元条目），但实际应用中，我们在一开始实例化几个或者十几个item对象时一般是没问题，但是当item非常多时，几百或者上千时，完全实例化比较耗时消耗性能大

4.5K2 0

前端高性能滚动 scroll 及页面渲染优化

在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。...当滚动表现正常时，用户就会感觉应用十分流畅，令人愉悦，反之，笨重不自然卡顿的滚动，则会给用户带来极大不舒爽的感觉。滚动与页面渲染的关系为什么滚动事件需要去优化？因为它影响了性能。...其中，用户 scroll 和 resize 行为（即是滑动页面和改变窗口大小）会导致页面不断的重新渲染。当你滚动页面时，浏览器可能会需要绘制这些层(有时也被称为合成层)里的一些像素。...可以就近 F12 打开开发者工具面板，给标签添加上 pointer-events: none 样式，然后在页面上感受下效果，发现所有鼠标事件都被禁止了。那么它有什么用呢？...pointer-events: none 可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。

2.6K3 0

开发 h5| Hybrid | 微信小程序｜实践踩坑总结十六条

解决方案 input的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal...(中招) 2 在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的(中招)。...在解决这个问题之前，我们先理解-webkit-overflow-scrolling的两个属性 1 auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...2 touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...原生组件会遮挡 vConsole 弹出的调试面板。在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。

2.5K3 0

【CSS——效果实现】动态的 Tab 栏（蓝桥杯真题-6180）【合集】

简单来说，在页面未开始滚动时顶栏处在其原有的位置上，当页面向下滚动一定区域后，顶栏会跟随滚动固定在页面上方。本题请实现一个顶栏固定的课程网站首页。...注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。...当用户向下滚动的高度没有超过标题栏（即 .heading 元素）的高度时，保持 Tab 栏在其原有的位置。当滚动高度超过标题栏的高度时，固定显示 Tab 栏在网页顶部。...position: sticky; top: 0px：使 Tab 栏在页面滚动时固定在顶部。 .buttons a 样式：设置 Tab 栏中链接的样式，去除下划线，设置文字颜色和内边距等。...页面滚动：由于 Tab 栏的 position 属性设置为 sticky，当页面滚动时，Tab 栏会固定在页面顶部。测试结果

360 0

UI设计中的基本动效，值得收藏一波

指向型动效的分类 1.滑动信息列表会跟随着用户的交互手势而动，然后卡片到相应的位置上，保持整齐感，它属于指向型动画，物体的滑动取决于用户是用那种手势滑动的。...10.滚动根据用户的手势进行滚动操作，非常使用与列表信息的查看。这个交互方式是我们用的最频繁的，仙子我们也可以加入一些动效使这个交互更加的有趣和丰富。 ?...11.平移当一张图片在我们有限的屏幕里没有办法看完的时候，会使用这样的效果。除了放大效果，这样的平移还可以加上动效配合一些功能使用。 ?...滑动效果相对来说比较单一和常见，使用动效切换可以让用户产生眼前一亮的效果，例如一些商品款式的切换，就可以使用这样的效果。 5.展开推叠适合场景：当用户打开一堆功能选项的时候。...9.融合效果适合场景：当用户操作一个功能点时可能会处罚其他功能。例如运动app开始健身或者跑步的时候，点击开始后会出现暂定或是结束。 10.滚动适合场景：当用户垂直或者水平移动页面时。

2.2K1 0

手势魅力-设置一个触摸菜单

(touchstart,touchmove,touchend),触摸属性,以及实现侧边栏动画,在处理移动端点击,拖动,滑动时,是不得要考虑用户的触摸手势,判断手指在页面上到底是点击还是滑动的,利用原生js...这绝对不是你想要用你的手机触摸手势发生的事情，所以考虑一下：当你打开/关闭菜单时，你是否有兴趣阅读滚动隐藏的内容？如果你的拖拽方向是水平的，你就不能滚动 ? 我们需要一些边界在这里！...现在已经完成了，下一步就是计算叠加层的淡入效果重叠计算目标是: 当moveX = -menuWidth时,不透明度= 0 当movX = 0,不透明度= 0.5 然而,这些计算并不那么线性。...当菜单打开时，它可以关闭或保持打开状态 - 与动画一起 - 返回之前的位置如果它关闭了，那么它可以打开或者保持关闭状态，也可以在动画返回之前 if ((translateX 滑动的位置重叠计算(透明度变化,也就是用小数来计算,百分比值) 动画结束(菜单栏打开和关闭状态,菜单栏的位置) 以下是本文陌生词汇(仅供参考) 1.

1.9K4 0

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

保持文本标签简短，但是长度实在太长时就截断 ? 不要换行不要缩小目的地icon（可选） Icon 可以对标签作为目的地的进行补充。使用时，应始终放置在文本之前。...standard dismissible navigation drawer会保持打开状态，直到再次点击menu icon (2) ?...调整 bottom navigation drawer 的打开位置，以便在屏幕底部剪切最后一个视图中的列表项。这可以通知用户有更多项目要查看。...滚动 Bottom navigation drawers 一旦打开至全屏高度，就可以在内部滚动。当最初打开到屏幕高度的50％时，在显示其他项目之前，必须将 drawer 拖到屏幕高度。...在滚动时，drawer 的标题变成了一个高的 top app bar，并具有很好的可供性。 ?

3.8K4 0

flstudio21有什么新功能，主题随心换，苹果M21家族芯片原生支持

图3 拖入歌曲鼠标箭头放在列表滚动条下面的数字上，滑动滚轮拉伸到适当大小，能较为清晰地看到样本音频频率的最高峰即可。...调整出歌曲的音量包络线1、在FL Studio主界面右上方的功能面板中打开步进音序器。...（如图4）图4 打开功能面板中的步进音序器2、然后点击第一个通道按钮，选择一首歌曲，将弹出Channel settings(通道设置)窗口。...图8 通过包络控制点来调整曲线趋势然后左键拖拽控制点以使包络曲线呈现类似“下坡”的趋势，意味着当滚动条到此进度时这首歌曲的音量按比例减小。同理，要达到下一首歌淡入的目的也可以调整为“上坡”曲线。...首先我们找到左上方的功能面板，点击file，选择Export，再点击Wave file，或者直接通过快捷键ctrl + R 呼出面板。

4674 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

师于源码 | Flutter 区域视口双向滑动

UGUI Scrollrect滚动优化：无限循环利用

小程序提升界面使用体验　丰富了内容展示组件

Axure高保真教程：鼠标滚动上下翻页效果

微信小程序开发学习笔记（二）——小程序框架、组件、WXML

Vcl控件详解_c++控件

Visual Studio Code 快捷键 Mac 版

Visual Studio Code快捷键

两万字：讲述微信小程序之组件

Axure RP9中文版，交互式原型设计软件Axure RP 9永久版下载安装

安卓Chrome使用技巧合辑

微信小程序示例 - 视图容器

Unity基础（24）-UGUI

前端高性能滚动 scroll 及页面渲染优化

开发 h5| Hybrid | 微信小程序｜实践踩坑总结十六条

【CSS——效果实现】动态的 Tab 栏（蓝桥杯真题-6180）【合集】

UI设计中的基本动效，值得收藏一波

手势魅力-设置一个触摸菜单

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

flstudio21有什么新功能，主题随心换，苹果M21家族芯片原生支持

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐