相关问题
#鸿蒙通关秘籍#如何在鸿蒙应用中设置Scroll组件的滚动条颜色和宽度？
318浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中为列表项添加标记？
340浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中创建垂直和水平滚动的列表？
413浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中为Tabs组件设置初始页面索引？
245浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙视频播放器中维护播放列表和播放索引？
245浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中处理列表的滚动超出安全区？
192浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙中实现可滚动的导航栏？
338浏览 • 1回复 待解决
FA开发，界面数据太多，怎么添加滚动条 ？
3936浏览 • 2回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中利用缓存优化滚动列表性能？
306浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为图片添加滤镜效果？
276浏览 • 1回复 待解决
如何在List组件中监听滚动条到底端的事件
2317浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在ArkUI中实现列表的滚动事件监听？
321浏览 • 1回复 待解决
HarmonyOS webView隐藏滚动条
23浏览 • 1回复 待解决
#鸿蒙通关秘籍#为Tabs组件添加切换事件并显示当前索引
145浏览 • 1回复 待解决
如何获取List组件滚动条滚动的距离
2714浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙ARK UI中实现待办事项列表的添加和删除功能？
317浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在Tabs组件中实现侧边导航？
357浏览 • 2回复 待解决
#鸿蒙通关秘籍#如何动态调整SideBarContainer的侧边栏宽度？
246浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS Next项目中配置侧边栏组件的结构？
296浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中为组件添加线性渐变效果？
226浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在DevEco Studio中为鸿蒙应用创建PageAbility？
263浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中添加获取Wifi信息权限配置？
322浏览 • 1回复 待解决
HarmonyOS RichText组件如何取消滚动条
114浏览 • 1回复 待解决
HarmonyOS Web组件的滚动条如何隐藏
31浏览 • 1回复 待解决
如何自定义滚动条的样式？
733浏览 • 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方向，展示侧边的索引表。