可左右滚动(类似卡片)的颤动小部件 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

，要点击小图弹窗跳出预览大图，需要大图左右切换，介于小程序的文档，我使用的是swiper组件轻松完美的实现了它。...但是，好景又不长，测试阶段上线倒数第二天，提出了个bug，有的用户会传超出屏幕长度的图片，需求是不影响正常左右切换的情况下，要让图片能够上下滑动显示完整。我的天。。。...swiper和swiper-item会被默认加上100%的高度，所以想要实现overflow-y：scroll是不可能的额，想想小程序的纵向滚动就只有scroll-view可以实现，我把scroll-view...包住swiper不行，毕竟每一个swiper-item都是独立的，有的长有的短，包一个是达不到要求的，就算能滚动，但是别忘了前边说的：swiper和swiper-item会被默认加上100%的高度，...后记：项目上线的前几个小时，我们突然发现小程序是有类似朋友圈九宫格的图片API的，哈哈，又好笑又生气~ 声明：　　请尊重博客园原创精神，转载或使用图片请注明：　　博主：xing.org1^ 　　出处

3.7K7 0

微信小程序实践：2.3 可滚动的容器组件之 scroll-view

在这个地方，有一个实际内容宽度大于手机屏幕的容器，它支持用户用手指左右滑动。下方还有一个滚动提示条，这是根据滚动位置计算出来的。...这是自定义实现的效果，相当于浏览器的滚动条，效果是通过css样式控制的。 3、主要属性讲解 scroll-view是一个略显复杂的组件。它的属性主要支持了两个功能：左右滚动与下拉更新。...默认情况下scroll-top是0，当实体向上滚动时，其值慢慢增加。 ? 同理，scroll-left类似。当开启的是横向滚动时，scroll-left是距离左边界、子实体向左滚动的距离。...官方文档说，在使用scroll-into-view时，「设置哪个方向可滚动，则在哪个方向滚动到该元素」。...不支持也情有可原，因为要滚动，普通组件与原生组件都不在一个层，一个要上面，一个要下面，怎么同步？网上有人说，小程序scroll-view不支持嵌套textarea等组件，那是旧版本。

18.6K3 0

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

是的

没有找到

【Flutter】自定义滚动开关

**我们将在flutter应用程序中使用lite_rolling_switch 包来实现一个自定义滚动开关演示程序，该程序具有吸引人的动画和一些属性。...假设此属性的价值回报为true，则此开关为ON，为OFF则为false。当此属性无效时，开关小部件会失效。该演示视频展示了如何在颤动中创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行的切换交互，该开关将滚动到具有动画效果的另一侧，并且在滚动该开关时将更改图标和文本。...在小部件内，我们将添加一个列小部件。在此小部件中，我们将添加mainAxisAlignment为center。在内部，我们将添加带有样式的文本。

38.1K6 0

Flutter 卡片选择器

卡片的边角和阴影有些调整。卡片是用于表示某些关联数据，例如集合，地理区域，膳食，联系方式等。卡片包含有关单个对象的内容和动作。在本文中，我们将探讨Flutter中的**Card Selector。...选择器是完全可配置的，动画时间，卡之间的间隙，堆叠卡的尺寸因子。用户可以从左向右或从右向左滑动卡。特定卡上的信息将有所不同。该演示视频展示了如何在颤动中创建卡选择器。...一个小部件，用于选择向左或向右滑动的堆叠小部件。它会显示在您的设备上。属性 **cardsGap：**此属性用于卡之间的间隙大小。...另外，我们将添加mainCardWidth表示列表中第一个元素的宽度，mainCardHeight表示列表中第一个元素的高度，onChanged表示要在更改后的卡片上执行的回调。...他的子属性添加了Stack（），**并在内部添加了图像。我们将添加一个列小部件，在内部添加卡的详细信息，例如银行名称，类型，编号和分支。所有数据均来自json文件。

10.4K2 0

WordPress免费主题：Document，让阅读变得更加方便

新建菜单添加菜单项发布到顶部菜单 5.小部件、侧边栏主题具有文章信息、作者信息、最新文章、最近更新四个小部件（小部件自带配置，可在添加的时候填写），添加后默认在文章页面的右侧边栏显示。...主题前端优化文章页右边栏正常高度时，跟随文章滚动，滚动高度超出侧边栏高度时自动悬浮，保持右边侧边栏始终存在元素，不会空白；访问首页时显示自定义的站点描述，文章页时自动截取文章内容作为网页描述；优化...、成功文字块、错误文字块、失败文字块、图片灯箱、文字标记自定义顶部菜单 404页面搜索空结果页面文章密码权限控制 20220617更新修复窗口大小改变时，固定状态下的左右侧边栏位置没有同步变动，...修复已知的一些UI样式问题。 20220709更新重构侧边栏，拆分成四个可自定义的小部件。增加文章顶部的面包屑导航。修复因为QQ、微信浏览器不支持16进制透明颜色导致阴影失效的BUG。...20220724更新首页变成两栏显示优化了大屏和小屏显示的字体大小调整了移动端的UI样式下滑阅读时自动隐藏导航栏，上滑时自动显示。

6.4K4 0

Flutter中构建布局顶

这些小部件安排在ListView中，而不是列中，因为在小设备上运行应用程序时，ListView会自动滚动。...有关其他可用小部件的信息，请参阅小部件概述，或使用API参考文档中的搜索框。此外，API文档中的小部件页面经常会提供有关可能更适合您需求的类似小部件的建议。...标准小部件 Container: 向边框添加填充，边距，边框，背景颜色或其他装饰。 GridView: 放置小部件作为可滚动的网格。 ListView: 将小部件列为可滚动列表。...Dart code:来自Flutter Gallery的grid_list_demo.dart ListView ListView是一个类似列的小部件，它的内容对于其渲染框太长时会自动提供滚动。...Card摘要：实现材料设计卡片用于呈现相关信息的块接受单个孩子，但该孩子可以是Row，Column或其他包含子级列表的小部件显示圆角和阴影卡片的内容不能滚动来自材料组件库卡片示例： ?

50.1K1 0

鸿蒙开发实战案例：视频卡片和列表区域的联动滚动思路

介绍本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。...视频卡片点击上一条、下一条时，通过List的滚动控制器控制列表滚动到指定位置，视频卡片不发生滚动。点击列表项，列表发生滚动，视频卡片不滚动。...: this.scroller }) { ... } .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, // 可滚动组件往末尾端滚动时的嵌套滚动选项...scrollBackward: NestedScrollMode.SELF_FIRST // 可滚动组件往起始端滚动时的嵌套滚动选项,自身先滚动，自身滚动到边缘以后父组件滚动。...『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；

1.5K1 0

iOS开发常用之网络

有点类似于Groupon应用程序。 HBHorizontalTableView - swift，TableView横向滚动小示例（仿照AppStore应用展示）。...MediumScrollFullScreen - Medium的可扩展滚动页面，上下滚动时，全屏显示内容，并自然消隐上下菜单。...仿LOL滚动视图 - 仿LOL滚动视图。答案选择切换页 - 将scrollview和tableview封装在一起，在初始的时候简单的将数据带上，就可以一页一页的左右来回滑动。...iOS-Slide-Menu - 能够类似Facebook和Path那样弹出左右边栏侧滑菜单，还支持手势。多种可以自定义的属性（非常不错）。...ZLSwipeableViewSwift - Swift卡片堆叠效果的实现（ZLSwipeableView）】可实现类似Tinder和Potluck应用程序的卡片堆叠效果，该项目基于ZLSwipeableView

32.9K1 0

手撸一个前端天气卡片

最近学校社团面试题目是做一个天气卡片，正好可以借此机会趁着国庆小长假静下心来好好研究一番。于是就有了今天的这篇文章。...（实际上在国庆小长假之前就基本上把问题搞定了）目前版本的DouWeather托管在临时仓库，因为没有考虑代码结构，后期维护困难。...其中win11小部件添加了浅阴影，可能是为了让小部件从亚克力背景中凸显出来。于是乎，我也照猫画虎，设计了DW的晴天图标，并且用XD设计出了第一种卡片样式（现DW的medium卡片样式）。...然而DW的天气图标并没有采用上述的两种方式。我对图标部分使用Web Components做了封装，已经是类似symbol的作用，因此再使用symbol便显得有些多此一举。...给我灵感的，是windows的资源管理器：天气卡片的主体元素固定在左侧不动，右侧的数据展示根据卡片宽度显示滚动条，实现也非常简单，因为我使用的弹性布局，只要在原来的数据展示区域外边包装一层带有 flex-grow

2.7K5 0

当卡片式UI不再流行，列表式UI将是王牌

更深入的挖掘通过使用HotJar分析其他网站上的点击和滚动距离，我们注意到类似的问题。Spox.com 的主页最近被重新设计，新的设计侧重于新闻列表，从其他的分离开来。 ?...您可以在 Spox 电视季后赛横幅上方的小图片上看到大量的可点击事件。这些点击会使导航轮播。他们在此页面上的被点击次数为43％。...卡片式增加了滚动的深度在 Goal（最右边）上使用卡片鼓励用户向下滚动页面。这不是常见的，因为每个卡片相比于 Voetbalzone（最左边）占用高出38％的高度。...虽然用户滚动更多，他们仍然看到较少的内容，比较左侧网站少了3篇文章。可阅读的文章数很明显，列表的好处是你可以在视图中放更多的新闻文章，从而更快地扫描标题。...Material Design 建议的是列表是“可快速扫描”，适合显示类似的重复的内容。当用户不直接比较图像或文本时，不推荐使用卡片式。

4.6K7 0

butterfly文章页面上下篇按钮UI调整

点击查看更新记录更新记录 2022-03-16: 基本功能逻辑实现编写了电脑端的悬停卡片样式，且左右分离 2022-03-15: 基本功能逻辑实现实现了 UI 分离编写了手机端和电脑端的按钮样式...思路分析我试图通过将文章底部的按钮改至左右两侧，类似翻页键，同时添加悬停动作，通过css对兄弟相邻元素的hover监测来控制显隐，悬停按钮时在页面正中显示对应文章卡片。...首先要解决的是按钮显示问题，如果是常显，有可能遮盖正文内容，尤其是手机端应该不会有足够的位置。所以尝试通过设置滚动事件监听，在页面滚动至原本上下页翻页的位置，也就是正文刚好读完的时候，才显示按钮。...至于卡片样式，虽然我一开始是想做成手机端侧栏卡片fixed样式那种风格，但是考虑到可用的可见参数其实也就封面和标题，还要顾及到手机端的显示情况，所以目前的打算是做成书签风格。...STYLUS 新建 [Blogroot]\themes\butterfly\source\js\fixed-pagination.js, 这个 js 的作用就是提供滚动监测了，这里因为翻页按钮是常态隐藏的

2.3K2 0

【tkinter系列第十二课 Frame和Scrollbar窗口部件】

框架小部件主要用作其他小部件的几何主控件，或用于在其他小部件之间提供填充。框架小部件用于将其他小部件分组到复杂的布局中。它们还用于填充，并在实现复合小部件时作为基类使用。 ?...Scrollbar是滚动条的意思，那什么时候该用Scrollbar部件呢？Scrollbar 小部件几乎总是与Listbox、 Canvas 或 Text 小部件结合使用。...水平滚动条也可以与 Entry 小部件一起使用。当内容过多时，可以通过滚动条拖动显示。 ?...目标接下来我们使用frame来实现下面一个类似微信聊天的界面，左侧是显示好友的，有滚动条；右侧上面是聊天内容区，中间是消息编写区，最下面是按钮区；这里只是实现区域划分，并没有实现实际功能。 ?...添加滚动条使用Scrollbar滚动条要将垂直滚动条连接到Listbox这样的小部件，需要做两件事: 1.将小部件的 yscrollcommand 回调设置为 scrollbar 的 Set 方法。

4.2K1 0

Unity 如何实现卡片循环滚动效果

简介功能需求如图所示，点击下一个按钮，所有卡片向右滚动，其中最后一张需要变更为最前面的一张，点击上一个按钮，所有卡片向左滚动，最前面的一张需要变更为最后一张，实现循环滚动效果。...最中间的一张表示当前选中项，变更为选中项的滚动过程中，需要逐渐放大到指定值，相反则需要恢复到默认大小。...卡片循环滚动实现思路： • 定义卡片的摆放规则； • 调整卡片的层级关系； • 调整卡片的尺寸大小； • 卡片向指定方向移动，动态调整位置、大小、层级关系。...定义卡片的摆放规则第一张卡片放在正中间，其余卡片分成两部分分别放在左右两侧，因此如果卡片数量为奇数，则左右两侧卡片数量一致，如果卡片数量为偶数，多出的一张需要放到左侧或者右侧，这里我们定义为放到右侧。...卡片摆放的顺序如下图所示，在遍历生成时会判断当前索引是否小等于卡片数量/2，是则将卡片生成在索引值*指定卡片间距的位置上，否则将其生成在(索引值-卡片数量)*指定卡片间距的位置上。

4.4K2 2

异步分片计算在腾讯文档的实践

对于多行文本来说，内容超过四行就展示四行，否则有几行就展示几行，多选项也是类似的逻辑，所以每个卡片的高度都需要单独计算。...对于看板的这种计算情况，也是非常类似的。最初也是遍历计算排版的，现在我们首先考虑实现一个类似 React Scheduler 的调度器。 5....但从火焰图上可以看到当前每个 Task 都保持在 16ms 左右的耗时，FPS 基本稳定在60左右。 6. 中心扩散收集虽然异步调度器已经写好了，但我们应该怎么去分配异步任务呢？...对于 1000 个卡片以上的文档走异步分片计算，但可视区域内的卡片优先同步计算，这里会在上下左右多计算几个卡片，给用户滚动留一定的缓冲。在可视区域计算完成后立即渲染一次，保证用户能够快速看到页面。...然后开始计算可视区域之外的，这里最好的方式是以可视区域作为中心往两边扩散。如果此时文档有更新，或者用户滚动了页面导致可视区域变化了，之前计算过的卡片高度应该缓存起来，再继续剩余的卡片。 7.

1.6K3 0

WebBuilder View视图组件全功能详解（标准功能讲解）

有效降低服务器压力，提升高频访问列表的页面流畅度，适配数据量小、更新频率低的常态化台账页面。...横向滚动布局条目横向排列、支持左右滚动，适用于数据大屏看板、横向工单列表、分类卡片展示，可视化效果更强。5....自定义固定尺寸布局支持自定义条目宽度、间距、内边距，开发者可自由定制卡片样式，满足个性化页面设计需求，适配定制化业务首页、展示型页面。...1. listView 标准列表组件内置图标、主标题、副标题、状态角标、视图切换功能，支持小列表、大列表、图标列表多种样式切换，是人员档案、客户台账、单据记录、审批日志的标准化首选组件。...统一能力标准：全站列表、卡片、导航、台账统一底层组件，彻底解决页面样式杂乱、交互不统一、维护困难的问题。

1921 0

纯血鸿蒙APP实战开发——自定义Swiper卡片预览效果实现

效果图预览实现思路本解决方案通过维护所有卡片偏移的数组，实时更新卡片的偏移量，以实现swiper子组件内图片居中展示，两边等长露出。左右露出效果静态实现。Swiper组件基础视图效果如下。...如果所有子组件卡片大小一样，子组件内卡片居中展示即可实现效果。但是当子组件的卡片大小不一样时，无法通过简单的设置居中布局实现左右的等长露出。此时需要计算当前状态下的卡片的偏移量。...* 计算公式为：屏幕宽度 - Swiper两侧突出的偏移量 - 卡片自身的宽度。 * 此值即为卡片可偏移的最大值，也就是卡片右对齐的状态值。...【OpenHarmony】Uboot 驱动加载流程12.OpenHarmony构建系统--GN与子系统、部件、模块详解13.ohos开机init启动流程14.鸿蒙版性能优化指南.......在onAnimationStart...；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；

8312 0

FUXA Pro 版本更新历史---最新版1.3.2 【20260523更新】

表格控制滚动条报警视图滚动条输出控制格式数字 DAQ 存储未处理的 promise 拒绝安全修复安全：带测试标志的脚本安全：移除前端项目的脚本属性安全：请求路由逻辑中的身份验证绕过安全...无插值渲染模式 Modbus RTU 同一串口支持多个设备中文（繁体）翻译新增繁体中文支持用户体验改进多项小的用户体验改进触摸/点击事件图表中支持自定义显示模式 Node-RED 集成...MQTT 订阅项（JSON 类型）开关控制属性的刷新登出时刷新客户端标签选项中读/写缩放脚本的脚本绑定将点击的卡片带到前面从脚本打开卡片邮件通知每 1 分钟重复一次重复视图自动重建带自定义数据的图表...新增小部件功能表格控制带报警支持 API 日志 logApiLevel 设置条形仪表颜色范围支持 Modbus 套接字重用选项，支持串行读写标签死区死区选项自定义 CSS 每个项目的可定制...服务器标签值解析器登录对话框的虚拟键盘全屏面板控制和初始化中的视图背景结构面板控制中使用的对话框视图 influxdb 连接的错误处理程序报告名称验证器浏览器上 OPCUA 标签的滚动条面板控制中的卡片显示

5801 0

Qclaw生成课程笔记：道家的天道观的过程

但这次用QClaw来完成一个完整的《道德经》哲学网页，我还是被它的能力惊喜到了。记录一下全过程，给想做类似项目的同学一个参考。...，而是要把一段口述文字系统化地构建成一个可交互的网页产品。...、小细节，不只是静态文字具体到视觉方案：主色：纯白背景，粉紫色系（#e879f9、#c084fc、#a78bfa）作为点缀字体：思源宋体+站酷小薇体，既有学术感又有中国美学卡片设计：每个内容块封装成一张卡片...animation-delay:${Math.random()*10}s;box-shadow:00${size*2}px${color};`;container.appendChild(p);}2.卡片类型标签系统每个卡片左上角有一个小标签...6.视差入场动画每个卡片都有"滚动淡入+上移"的入场动画，通过IntersectionObserver实现，性能好，视觉效果自然。

2491 0

【软件开发规范七】《Android UI设计规范》

小图标点击区域：48x48dp 侧边抽屉到屏幕右边的距离：56dp 卡片间距：8dp 分隔线上下留白：8dp 大多元素的留白距离：16dp 屏幕左右对齐基线：16dp 文字左侧对齐基线：72dp ...，防止它挡住列表项悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线编辑悬浮按钮有两种尺寸：56x56dp/40x40dp ** 卡片（Cards） ** 编辑卡片是包含一组特定数据集的纸片...卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。 ...编辑 toasts和Snackbars类似，样式和位置可以自定义，建议遵循Snackbars的规则设计。 ...+ 可滚动的 tab bar 编辑和 tab 指示器一样的字体颜色编辑被锁定滚动的 tab bar tab只用来展现不同类型的内容，不能当导航菜单使用。

10K2 0

OpenHarmony应用开发—ArkUI组件集合

介绍本示例为 ArkUI 中组件、通用、动画、全局方法的集合。效果预览使用说明：1.点击组件、通用、动画、全局方法四个按钮或左右滑动切换不同视图。...// 系统图标| | |---gallerySample| | | |---GalleryCardSample.ets // 图库卡片展开...// 多任务| | |---shopSample| | | |---ShopCardSample.ets // 商店卡片展开...【OpenHarmony】Uboot 驱动加载流程12.OpenHarmony构建系统--GN与子系统、部件、模块详解13.ohos开机init启动流程14.鸿蒙版性能优化指南.......■ 文本与输入...『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；

4641 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭