相关问题
#鸿蒙通关秘籍#如何在鸿蒙应用中设置Scroll组件的滚动条颜色和宽度?
1198浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中为列表项添加标记?
1766浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中创建垂直和水平滚动的列表?
1614浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中为Tabs组件设置初始页面索引?
1446浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙视频播放器中维护播放列表和播放索引?
1488浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理列表的滚动超出安全区?
927浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中实现可滚动的导航栏?
1417浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中利用缓存优化滚动列表性能?
1502浏览 • 1回复 待解决
FA开发,界面数据太多,怎么添加滚动条 ?
4669浏览 • 2回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为图片添加滤镜效果?
1193浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现列表的滚动事件监听?
1535浏览 • 1回复 待解决
如何在List组件中监听滚动条到底端的事件
3204浏览 • 1回复 待解决
#鸿蒙通关秘籍#为Tabs组件添加切换事件并显示当前索引
1119浏览 • 1回复 待解决
HarmonyOS webView隐藏滚动条
1008浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在Tabs组件中实现侧边导航?
1533浏览 • 2回复 待解决
如何获取List组件滚动条滚动的距离
3999浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙ARK UI中实现待办事项列表的添加和删除功能?
1415浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS Next项目中配置侧边栏组件的结构?
1548浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何动态调整SideBarContainer的侧边栏宽度?
1334浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在DevEco Studio中为鸿蒙应用创建PageAbility?
1308浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为组件添加线性渐变效果?
1271浏览 • 1回复 待解决
如何自定义滚动条的样式?
1593浏览 • 1回复 待解决
HarmonyOS Web组件的滚动条如何隐藏
1221浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用程序中实现上一条和下一条新闻的切换?
1081浏览 • 1回复 待解决
如何订阅List组件中滚动条到底端的事件
2553浏览 • 1回复 待解决





















为列表添加滚动条和侧边索引栏可以按照以下步骤操作:
在List组件中启用滚动条功能,通过设置
scrollbar属性为on:html <!-- xxx.hml --> <div class="container"> <list class="listCss" scrollbar="on" > <list-item class="listItem"></list-item> <list-item class="listItem"></list-item> <list-item class="listItem"></list-item> <!-- 添加更多列表项 --> </list> </div>
创建自定义索引栏,通过设置
indexer属性并展示在列表右边:html <!-- xxx.hml --> <div class="container">
<list class="listCss" indexer="{{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item>
</list> </div>
给这些组件添加对应的样式:
css /* xxx.css */ .container { background-color: #F1F3F5; } .listItem { height: 20%; background-color:#d2e0e0; margin-top: 20px; } .listCss{ height: 100%; scrollbar-color: #8e8b8b; scrollbar-width: 50px; }
当设置
scrollbar属性时,实现了滚动条的显示。使用indexer属性并结合column方向,展示侧边的索引表。