- 综合排序
- 最热优先
- 最新优先
- 来自专栏用户4773577的专栏
鸿蒙Next Scroll+List+Tabs实现关联滑动
显示页签 this.selectedIndex = index if (index==0) { this.listScroller.scrollToIndex (0) }else if (index==1){ this.listScroller.scrollToIndex(10) }else { this.listScroller.scrollToIndex(20) } }) List({ space: 10
26110编辑于 2025-06-28 - 来自专栏鸿蒙开发笔记
鸿蒙（HarmonyOS）性能优化实战-Grid高性能开发
使用columnStart/columnEnd、rowStart/rowEnd布局，在scrollToIndex滑动指定Index时，Grid会遍历GridItem去查找位置。 而使用GridLayoutOptions布局，在scrollToIndex滑动指定Index时，则是通过计算方式去查找位置，查找GridItem位置效率更高。 场景示例下面介绍Grid中使用scrollToIndex滑动到指定位置的场景，其他场景不再赘述。反例：使用columnStart，columnEnd设置GridItem大小。 (1900); }) }.width('100%') .margin({ top: 5 }) }}效果对比正反例相同的操作步骤：通过点击按钮，在调用scrollToIndex之前使用 所以使用GridLayoutOptions设置GridItem大小方式，在使用scrollToIndex滑动指定Index时，能够有效减少Grid加载时间，提升应用性能。
53820编辑于 2024-10-18 鸿蒙5开发宝藏案例分享---Grid性能优化案例
**动态操作**（删除、拖拽、`scrollToIndex`跳转）**根本原因**： 使用`columnStart/columnEnd`时，Grid需要**遍历所有Item计算位置 **，而`scrollToIndex(1900)`这种操作会触发全量遍历，导致耗时飙升（实测可达447ms！）。 } else { /* 普通Item */ } }) } .columnsTemplate('1fr 1fr 1fr') // 3列布局 ```**卡顿原因**： 每次`scrollToIndex `scrollToIndex(1900)`直接通过数学计算定位，**耗时仅12ms**（原447ms）。 * * *### **性能对比数据**通过鸿蒙DevEco Studio的**Profiler工具**打点测试：| **方案** | scrollToIndex
24410编辑于 2025-06-18- 来自专栏鸿蒙开发笔记
纯血鸿蒙APP实战开发——二级联动
驱动加载流程12.OpenHarmony构建系统--GN与子系统、部件、模块详解13.ohos开机init启动流程14.鸿蒙版性能优化指南.......点击一级列表后，通过一级列表的索引获取二级列表的索引，调用scrollToIndex 一级列表点击事件 this.currentTagIndex = index; let itemIndex = this.findItemIndex(index); this.scroller.scrollToIndex (itemIndex, true); })}滑动二级列表触发组件滚动事件后，获取到列表可视区域第一个item对应的索引值，通过二级列表索引获取一级列表索引，调用scrollToIndex方法将一级列表滚动到指定索引值 == true) { this.currentTagIndex = currentClassIndex; this.classifyScroller.scrollToIndex(currentClassIndex
45110编辑于 2024-12-29 - 来自专栏老欧说安卓
鸿蒙NEXT版仿抖音快手App的实现自动滚动功能
scrollToIndex：滑动到指定Index，支持设置滑动额外偏移量。第一个参数填要滚动到的索引项；第二个参数表示是否平滑滚动，填true表示展示滚动动画，填false表示不展示滚动动画。 2、滑动到某个列表项，此时调用scrollToIndex方法，指定列表项的序号即可。 就本项目而言，滑动到图像列表已选中的图像，无疑要调用scrollToIndex方法。 width('100%').height(100) 然后在触发滚动操作的地方调用以下代码，即可让滚动器执行某个列表项的定位滚动： setTimeout(() => { this.scroller.scrollToIndex
27910编辑于 2025-07-24 - 来自专栏鸿蒙开发笔记
纯血鸿蒙APP实战开发——自定义视图实现Tab效果
PlayMode.Normal, onFinish: () => { this.currentIndex = idx; this.scroller.scrollToIndex this.transitionX = this.getTransitionX(idx); }) } })内容区实现：使用List，添加滑动手势来进行页面的切换，手势响应后，使用scrollToIndex let temIndex: number = this.currentIndex + this.currentIndexRadix; this.scroller.scrollToIndex let temIndex: number = this.currentIndex - this.currentIndexRadix; this.scroller.scrollToIndex OpenHarmony】Uboot 驱动加载流程12.OpenHarmony构建系统--GN与子系统、部件、模块详解13.ohos开机init启动流程14.鸿蒙版性能优化指南.......高性能知识点scrollToIndex
33420编辑于 2025-01-02 - 来自专栏鸿蒙开发笔记
HarmonyOS 开发实践——List组件的使用与AlphabetIndexer联动实践
scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign, options? 配合List组件使用AlphabetIndexer组件通过监听List组件的onScrollIndex事件来更新其选中状态，同时用户点击索引时，可以通过scrollToIndex方法触发List组件滑动并定位到指定首字母的项 支持双向绑定 }) .onSelect((index) => { // 根据选中的索引更新List的滚动位置 this.listScroller.scrollToIndex 20)// 每个索引组件的大小 .onSelect(index => { this.index = index this.scroller.scrollToIndex
86420编辑于 2024-10-29 - 来自专栏鸿蒙开发笔记
纯血鸿蒙APP实战开发——城市定位选择案例
.alignStyle(IndexerAlign.Right) // 弹出框在索引条左侧弹出 .onSelect((tabIndex: number) => { this.scroller.scrollToIndex 当点击AlphabetIndexer的字母索引时，通过scrollToIndex触发list组件滑动并指定firstIndex，从而实现List列表与AlphabetIndexer组件首字母联动吸顶展示
48820编辑于 2024-12-31 - 来自专栏HarmonyOS Next 实战系列
HarmonyOS NEXT 小说阅读器应用系列教程之上下翻页效果实现与性能优化教程
页面同步与更新为了实现页面同步，我们实现了以下方法：updatePage() { // 朗读面板当前所读页面发生改变，阅读文本滑动到对应页数 this.scroller.scrollToIndex( CONFIGURATION.PAGEFLIPPAGECOUNT));}aboutToDisappear(): void { this.currentPageNum = this.pageIndex;}updatePage方法通过scrollToIndex preferences.getPreference('lastReadPage', 0) .then((value: number) => { if (value > 0) { this.scroller.scrollToIndex
30000编辑于 2025-05-19 - 来自专栏HarmonyOS Next 三部曲
143.[HarmonyOS NEXT 实战案例十:List系列] 字母索引列表组件实战：打造高效联系人应用 基础篇
主要方法说明scrollTo滚动到指定位置scrollToIndex滚动到指定索引的项scrollEdge滚动到边缘scrollPage滚动一页二、字母索引列表实战案例2.1 需求分析我们将实现一个按字母分组的联系人列表 onSelect((index: number) => { // 滚动到对应索引位置 this.currentIndex = index this.scroller.scrollToIndex this.currentIndex = firstIndex})3.2.3 AlphabetIndexer与List的联动通过AlphabetIndexer的onSelect事件和Scroller的scrollToIndex 方法，我们实现了字母索引器与列表的联动：.onSelect((index: number) => { this.currentIndex = index this.scroller.scrollToIndex
34900编辑于 2025-06-30 - 来自专栏鸿蒙开发笔记
HarmonyOS 开发实践 —— 基于Grid实现混合布局
通过ForEach遍历出来的功能目录，与ForEach遍历出来的详细菜单列表，目录与内容两者的index值一致，两个分属不同的List列表，可以关联不同的Scroll值，可以通过scrollToIndex .width('25%') .height(35) .onClick(() => { this.scrollerForList.scrollToIndex 二级联动 this.currentIndex = index; this.scrollerForTitle.scrollToIndex
60010编辑于 2024-11-26 - 来自专栏终身学习者
React Native 列表组件：FlashList、FlatList 及更多
FlatList 的主要特性： 支持水平滚动 可添加列表头部和尾部 支持分隔符 下拉刷新 滚动加载 支持 scrollToIndex 方法 支持多列布局 示例如下： import { StyleSheet SectionList 主要特性： 支持水平滚动 支持列表头部和尾部 支持分隔符 支持分类标题 下拉刷新 滚动加载 支持 scrollToIndex 方法 支持多列布局 示例如下： import { StyleSheet
1.9K00编辑于 2025-02-06 - 来自专栏贾鹏辉的技术专栏@CrazyCodeBoy
React Native列表之FlatList开发实用教程
Horizontal(水平)方向的支持； 更加智能的Item以及section separators支持； 支持Multi-column(借助numColumns属性实现)； 添加scrollToEnd, scrollToIndex 比如：你可以使用scrollToIndex跳至中间位置，而无需过多渲染。 另外VirtualizedList还对调度进行了一些改进，这对应用程序的响应很有帮助。 比如使用 scrollToIndex滚动到指定的Item。 如果你有另一种数据类型比如immutable的list, 那么使用VirtualizedList是个不错的选择. scrollToIndex(params: object) 滚动到指定位置，如果不设置getItemLayout属性的话，可能会比较卡。 scrollToItem(params: object) 需要线性扫描数据 - 如果可能，请使用scrollToIndex。
8.4K00发布于 2019-12-10 - 来自专栏鸿蒙开发笔记
ArkUI滚动类组件-Scroll、Scroller
: Axis }); currentOffset(); scrollToIndex(value: number);}scrollTo：设置子组件滚动到指定位置，在滚动的时候还可以根据 animation scrollToIndex：滚动到指定下标，目前只支持 List 。
1K10编辑于 2024-09-30 - 来自专栏前端开发随笔
Rn使用FlatList导航栏自动回到中间
flatRef = useRef() const activeTab = (index) => { setActive(index) flatRef.current.scrollToIndex
48710编辑于 2023-10-17 - 来自专栏若城技术专栏
HarmonyOS NEXT 小说阅读器应用系列教程之上下翻页效果实现与性能优化教程
页面同步与更新 为了实现页面同步，我们实现了以下方法： updatePage() { // 朗读面板当前所读页面发生改变，阅读文本滑动到对应页数 this.scroller.scrollToIndex CONFIGURATION.PAGEFLIPPAGECOUNT)); } aboutToDisappear(): void { this.currentPageNum = this.pageIndex; } updatePage方法通过scrollToIndex preferences.getPreference('lastReadPage', 0) .then((value: number) => { if (value > 0) { this.scroller.scrollToIndex
22710编辑于 2025-05-20 - 来自专栏菩提树下的杨过
Flash/Flex学习笔记(5)：捕获摄像头(续)--在线抓屏并保存到客户端本地
d.getMilliseconds(),source:bmp}); tilelst1.dataProvider=dp; trace(dp.length); tilelst1.scrollToIndex
1.8K80发布于 2018-01-23 - 来自专栏HarmonyOS NEXT 端云一体
《仿盒马》app开发技术分享-- 分类模块顶部导航列表（15）
this.selectedIndex, dataSource: this.list, onItemSelected: (item: number) => { this.listScroller.scrollToIndex } else { this.selectedIndex = index } this.listScroller.scrollToIndex
14200编辑于 2025-06-23 - 来自专栏HarmonyOS Next 实战系列
HarmonyOS NEXT 小说阅读器应用系列教程之组件生命周期与数据同步机制教程
Watch('updatePage')currentPageNum: number;updatePage() { // 朗读面板当前所读页面发生改变，阅读文本滑动到对应页数 this.scroller.scrollToIndex 实现updatePage回调函数处理变化updatePage() { this.scroller.scrollToIndex((this.currentPageNum - CONFIGURATION.PAGEFLIPPAGECOUNT
33000编辑于 2025-05-19 - 来自专栏HarmonyOS NEXT 端云一体
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（16）
alignment: DialogAlignment.Top, customStyle:true });在这里我们实现下标的修改监听 onChange(){ this.listScroller.scrollToIndex
12100编辑于 2025-06-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号