鸿蒙开发：如何实现列表吸顶

前言本文基于Api13列表吸顶功能，在实际的开发中有着很大的作用，比如可以让列表层级之间更加分明，减少一定程度上的视觉混乱，由于吸顶的标题会随着滚动固定在顶部，可以让用户无需反复滑动回顶部确认分组位置， 鸿蒙当中实现一个列表吸顶，很是简单，官方为我们提供了ListItemGroup组件，使用它，便可以轻松搞定，我们可以先来看一个简单的案例：interface CityData { name: string 如果您也感兴趣，可以访问如下的refresh库地址，里面有详细的使用方式：https://ohpm.openharmony.cn/#/cn/detail/@abner%2Frefresh使用刷新库，实现一个列表吸顶也是非常的简单 sticky(StickyStyle.Header|StickyStyle.Footer)StickyStyle属性介绍如下：名称值说明None0header不吸顶，footer不吸底。 Header1header吸顶，footer不吸底。Footer2footer吸底，header不吸顶。本文标签：HarmonyOS/ArkUI

鸿蒙开发：实现一个标题栏吸顶

前言本文基于Api13来了一个需求，要实现顶部下拉刷新，并且顶部的标题栏，下拉状态下跟随手势刷新，上拉状态下进行吸顶，也就是tabs需要固定在顶部标题栏的下面，基本的效果可以看下图，下图是一个Demo， 第一个就是下拉刷新和上拉加载，第二个就是tabs组件进行吸顶，第三个就是手势冲突问题了，这三个问题解决了，那么效果基本上也就能实现了。 this.onRefreshPosition(this.refreshPosition) } return { offsetRemain: offset }; })下拉和上拉的位置确定好之后，那么就是标题栏吸顶操作了 RefreshPositionEnum, WaterFlowView } from '@abner/refresh'/** * AUTHOR:AbnerMing * DATE:2025/5/14 * INTRODUCE:吸顶页面 this.controller, refreshPosition: this.listPosition, //定位位置 isRefreshTopSticky: true, //是否顶部吸顶

ue实现吸顶的效果

}, mounted() { window.addEventListener("scroll", this.initHeight); }, methods: { // 实现吸顶效果

页面中元素的吸顶

[需求] 滚动页面到顶部，实现某元素固定到顶部效果 点击某个按钮，页面滚动到相应的位置 滚动页面，当到达某个位置时，高亮对应的相关按钮 [元素吸顶实现方式] 关于元素吸顶效果，通过查阅相关资料和相关测试 this.isFixed = scrollTop > offsetTop; } } [三、使用getBoundingClientRect().top] 还有一种更为直接的方式，可以实现吸顶效果 ，就是使用getBoundingClientRect().top来获取元素相对于视口（浏览器窗口）的位置，相对于offsetTop，该方法不用考虑到吸顶元素的父级元素和页面滚动条的高度，直接对该元素进行处理即可 { /** * getBoundingClientRect().top 获取某元素距离浏览器顶部的高度，不包含滚动的距离 this.offsetTop 表示的是吸顶元素距离顶部的条件值

移动端吸顶fixbar解决方案

需求背景 经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。 问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现 滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。

JS 吸顶导航，告别“回到顶部”

本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么 如图： 吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方 当页面向下滚动时超过了吸顶导航的初始位置时，需要把吸顶导航栏固定在窗口顶部，一般吸顶导航栏还可以替换成文章标题栏，搜索框、tab条等等，例如百度糯米，天猫，淘宝最为常用。 明白了吸顶导航条的基本效果，下面写个简单的demo吧。 2、吸顶导航的实现方法 一、样式结构搭建 考虑到触发吸顶功能，需要为导航条设置触发后的样式。 <! “回到顶部”，如影随行的“吸顶式导航”

告别“回到顶部”，如影随行的“吸顶式导航”

告别“回到顶部”，如影随行的“吸顶式导航”

告别“回到顶部”，如影随行的“吸顶式导航”

告别“回到顶部”，如影随行的“吸顶式导航”

告别“回到顶部”，如影随行的“吸顶式导航”</p

基于 Vue 的两层吸顶踩坑总结

图片.gif 功能点：两层吸顶，因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置，这个功能点和锚点有些类似。 主要原因：第一层吸顶还符合吸顶条件，第二层吸顶已经开始消失 解决方案：给第一层吸顶元素添加 minHeight 属性，其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。 这里有一个需要注意的点在于：一开始第一层吸顶元素的高度并非两者之和，所以这里就需要监听滚动事件，在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性 以下代码块中 false }" 中的 disabled 的值设为 true 即可 ◎ 吸顶“难舍难分” 在 IE 浏览器中，两层吸顶元素始终吸在一起 ? position 值为 static 即可 ◎ 吸顶“变形” 同样 DOM 结构的吸顶元素，在 IE 浏览器中，吸顶会变形 查看 vue-sticky 的源码，发现 position:fixed; 是设置在要吸顶的元素的第一个子元素上

微信小程序实现吸顶、网格、瀑布流布局

webview模式下编写，但是对小程序的渲染性能有一定的追求，就需要使用Skyline模式进行渲染，同时在这种模式下有也有一些特殊的组件，可以轻松的实现想要的效果，本文将介绍在Skyline模式下如何实现吸顶 主要组件介绍 1. sticky-section 吸顶布局容器； 仅支持作为 <scroll-view type="custom"> 模式的直接子节点。 2. sticky-header 吸顶布局容器； 仅支持作为 <scroll-view type="custom"> 模式的直接子节点或 sticky-section 组件直接子节点。 ++) % imgUrlList.length], } }; return newList; } Page({ data: { // 顶部列表数据 topList: new Array(15).fill(0), // 底部列表数据 bottomList: getNewList(),

【前端词典】4 种滚动吸顶实现方式的比较

我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。 后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。 我们一定需要使用 scrollTop-offsetTop 的值来实现滚动吸顶的效果吗？答案是否定的。 我们一同看看第四种方案。 遇到的两个问题 一、吸顶的那一刻伴随抖动 出现抖动的原因是因为：在吸顶元素 position 变为 fixed 的时候，该元素就脱离了文档流，下一个元素就进行了补位。就是这个补位操作造成了抖动。 描述： 当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样 原因：在 ios 系统上不能实时监听

AngularDart Material Design 列表 顶

MaterialListComponent类充当提供样式和收集项事件的能力的列表的根节点。 默认大小为“auto”，它将列表的大小调整为其内容。 默认情况下，材质列表将扩展到其父级的整个宽度。 注意：规范清楚地列出了预定义的列表大小，因此请谨慎使用默认的扩展大小。 设置为0可使列表扩展到其父级的全宽。 width dynamic 已禁用！改用siaze输入。 注意：如果material-list-item在其祖先中具有DropdownHandle，则如果closeOnActivate为true，则在触发（即单击或按下Enter / space on）列表项时将关闭该下拉列表

基于 Vue 的两层吸顶踩坑总结

图片.gif 功能点：两层吸顶，因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置，这个功能点和锚点有些类似。 主要原因：第一层吸顶还符合吸顶条件，第二层吸顶已经开始消失 解决方案：给第一层吸顶元素添加 minHeight 属性，其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。 这里有一个需要注意的点在于：一开始第一层吸顶元素的高度并非两者之和，所以这里就需要监听滚动事件，在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性 以下代码块中 false }" 中的 disabled 的值设为 true 即可 ◎ 吸顶“难舍难分” 在 IE 浏览器中，两层吸顶元素始终吸在一起 ? position 值为 static 即可 ◎ 吸顶“变形” 同样 DOM 结构的吸顶元素，在 IE 浏览器中，吸顶会变形 查看 vue-sticky 的源码，发现 position:fixed; 是设置在要吸顶的元素的第一个子元素上

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

效果图预览使用说明向上滑动列表，页面向上滚动到末尾后隐藏视频，继续向上滑动，卡片吸顶，列表开始滚动，列表滚动到底触发回弹效果。 })为了实现视频卡片的吸顶效果， Scroll 容器的内容高度使用 calc 计算属性设置为 Scroll 容器高度和视频高度的和，使 Scroll 滚动到尾部边缘时，视频隐藏，视频卡片吸顶。 layoutWeight 为1，使列表自动占满 Scroll 内容的剩余空间，当视频卡片吸顶时新闻列表可以完全显示，并且当新闻标题改变导致卡片高度发生变化时，新闻列表组件高度也相应变化。 1.OpenHarmony开发基础2.OpenHarmony北向开发环境搭建3.鸿蒙南向开发环境的搭建4.鸿蒙生态应用开发白皮书V2.0 & V3.05.鸿蒙开发面试真题（含参考答案） 6.TypeScript 【OpenHarmony】Uboot 驱动加载流程12.OpenHarmony构建系统--GN与子系统、部件、模块详解13.ohos开机init启动流程14.鸿蒙版性能优化指南.......通过状态变量

【前端词典】4 （+1）种滚动吸顶实现方式的比较

我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。 后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。 遇到的两个问题 一、吸顶的那一刻伴随抖动 出现抖动的原因是因为：在吸顶元素 position 变为 fixed 的时候，该元素就脱离了文档流，下一个元素就进行了补位。就是这个补位操作造成了抖动。 描述： 当页面往下滚动时，吸顶元素需要等页面滚动停止之后才会出现吸顶效果 当页面往上滚动时，滚动到吸顶元素恢复文档流位置时吸顶元素不恢复原样，而等页面停止滚动之后才会恢复原样 原因：在 ios 系统上不能实时监听 有的朋友或许会说这个我知道，可是这和滚动吸顶有什么关系呢？ 不急，你是否还记得滚动吸顶使用了 offsetTop 或者 getBoundingClientRect().top 来获取响应的偏移量呢？

AngularDart Material Design 下拉列表 顶

使用多选模型时，用户必须通过单击其外部来关闭下拉列表。 可以通过传递material-select-item元素手动声明选择选项。 如果OptionGroup为空并且已定义emptyLabel，则下拉列表将包含其他组。 如果没有为空组定义emptyLabel，它将不会出现在列表中。 例如，对于带有数字选项的下拉列表，显示“每页结果”的文本元素。 buttonText String  按钮上的文字。 visible bool  下拉列表是否可见。 width dynamic  下拉列表的宽度，默认为无，有效值为0-5。 visibleChange Stream<bool>  当下拉列表的可见性发生变化时触发。

导航栏滚动吸顶并自动高亮和点击跳转锚点

2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。 setNavList] = useState(navInfo);//这里使用自行构建的导航栏 const [fixNav,setFixNav] = useState(false);//用户标识什么时候导航栏吸顶 ，另外增加了一个class为zhanfIx的地址，因为当导航栏吸顶时，此处会因为空出位置，下面内容上移，而产生不和谐的效果，我们需要在其吸顶的同时增加一个div来占位，以增加平滑的效果。 下面我们来看一下导航栏吸顶和滑动到指定位置导航栏高亮的逻辑。 }) //我们设定导航栏的高度是60px，导航栏占位高度同样是60px if (nav_contentReact.y <= 60 ) { // 导航-吸顶

小程序scroll-view滚动时高亮对应区域的吸顶tab项

记一下scroll-view的使用 滚动时,区域元素出现在屏幕上,对应的tab项目高亮 代码: wxml: <view class="sticky-menu" hidden="{{appear}}"

鸿蒙 List 组件解析：从基础列表到高性能界面开发指南

一、引言：列表布局 —— 鸿蒙应用的数据展示中枢在鸿蒙应用开发体系中，列表布局是处理结构化数据展示的核心场景。 本文将系统解析这三个组件的核心机制、进阶用法与工程实践，帮助开发者掌握高性能列表开发的鸿蒙范式。 二、核心组件架构与协作机制2.1 组件层级与职责划分鸿蒙列表体系采用三层架构设计：List：列表容器组件，负责整体布局控制、滚动管理与性能优化ListItem：列表项原子单元，承载具体数据展示与交互逻辑 ListItemGroup：列表分组组件，实现数据逻辑分组与吸顶吸底效果组件层级关系示意图：List├─ ListItemGroup（分组容器）│ ├─ ListItem（列表项1）│ ├─ ListItem 设置固定项高度 .itemSize (80)分组头部不吸顶确认 .sticky (StickyStyle.Header) 已设置，且 List 为垂直布局滑动删除无响应1.

【鸿蒙 HarmonyOS】UI 组件 ( 列表 ListContainer 组件 )

文章目录 一、布局中设置列表 ListContainer 组件 二、ListContainer 组件用法 三、完整代码示例 四、GitHub 地址 一、布局中设置列表 ListContainer 组件 ---- 给定一个数据源 , 数组或集合 , 将数据源中的每一项展示到列表中 ; 布局文件中的列表配置 : <? </DirectionalLayout> 二、ListContainer 组件用法 ---- ListContainer 组件涉及到如下两个问题 : ① 提供的数据源 ; ② 将数据源中的数据展示到列表中 : 调用 ListContainer 对象的 setItemProvider( ) 方法为列表设置数据源 ; // 获取布局文件中的 ListContainer 列表 */ class DataItem{ /** * 列表项字符串 */ public String text; /** * 构造函数初始化列表项

年度实用技巧 | 页面上吸顶的效果是怎么做到的

吸顶超出父容器重叠元素粘性定位知识点定位以下知识内容来自于菜鸟教程属性名作用属性值position指定了元素的定位类型。static 定位HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 实现方案类型实现方案吸顶使用fixed定位的元素的位置相对于浏览器窗口是固定位置，可以实现吸顶的效果。超出父容器使用absolute绝对定位的元素的位置相对于最近的已定位父元素，可以超出父元素。

Flutter 构建完整应用手册-列表 顶

基础列表 显示数据列表是移动应用程序的基本模式。 Flutter包含ListView部件，使列表变得轻而易举！ 创建一个水平列表 有时，您可能想要创建一个水平滚动而不是垂直滚动的列表。 ListView部件支持开箱即用的水平列表。 使用长列表 标准的ListView构造函数适用于小列表。 为了处理包含大量项目的列表，最好使用ListView.builder构造函数。 创建一个包含不同类型条目的列表 我们经常需要创建显示不同类型内容的列表。 例如，我们可能正在制作一个列表，其中显示一个标题，后面跟着与该标题相关的几个项目，后面是另一个标题，等等。 对于这个例子，我们将生成一个项目列表来处理。 该列表将包含一个标题，后跟五个消息。 冲洗，重复。