相关问题
#鸿蒙通关秘籍#如何在鸿蒙应用中为列表项添加标记？
59浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中创建垂直和水平滚动的列表？
62浏览 • 1回复 待解决
FA开发，界面数据太多，怎么添加滚动条 ？
3781浏览 • 2回复 待解决
如何获取List组件滚动条滚动的距离
2547浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙视频播放器中维护播放列表和播放索引？
66浏览 • 1回复 待解决
如何在List组件中监听滚动条到底端的事件
2179浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理列表的滚动超出安全区？
52浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中实现可滚动的导航栏？
62浏览 • 1回复 待解决
如何自定义滚动条的样式？
551浏览 • 1回复 待解决
如何订阅List组件中滚动条到底端的事件
1733浏览 • 1回复 待解决
如何通过代码触发滚动条滚动到某个位置
2581浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为图片添加滤镜效果？
72浏览 • 1回复 待解决
ListContainer 有滚动条 显示吗？
5655浏览 • 1回复 待解决
请问ScrollView怎么显示滚动条？
5521浏览 • 1回复 待解决
#鸿蒙通关秘籍#为Tabs组件添加切换事件并显示当前索引
0浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现列表的滚动事件监听？
86浏览 • 1回复 待解决
HarmonyOS 如何隐藏Web组件的滚动条？
486浏览 • 2回复 待解决
#鸿蒙学习大百科#如何设置滚动条的状态？
192浏览 • 0回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙ARK UI中实现待办事项列表的添加和删除功能？
72浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS Next项目中配置侧边栏组件的结构？
69浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在Tabs组件中实现侧边导航？
43浏览 • 2回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为组件添加线性渐变效果？
59浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何隐藏鸿蒙应用的状态栏和导航条以实现沉浸效果？
52浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用程序中实现上一条和下一条新闻的切换？
66浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在DevEco Studio中为鸿蒙应用创建PageAbility？
45浏览 • 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方向，展示侧边的索引表。