HarmonyOS Next开发学习手册——容器组件(list开发)

list是用来显示列表的组件,包含一系列相同宽度的列表项,适合连续、多行地呈现同类数据。

创建list组件

在pages/index目录下的hml文件中创建一个list组件。



/* xxx.css */
.container {
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  background-color: #F1F3F5;
}
.listItem{
  height: 20%;
  background-color:#d2e0e0;
  margin-top: 20px;
}

HarmonyOS Next开发学习手册——容器组件(list开发)_第1张图片

说明:

  • 是的子组件,实现列表分组功能,不能再嵌套,可以嵌套。
  • 是的子组件,展示列表的具体项。

添加滚动条

设置scrollbar属性为on即可在屏幕右侧生成滚动条,实现长列表或者屏幕滚动等效果。



/* xxx.css */
.container {
  flex-direction: column;
  background-color: #F1F3F5;
}
.listItem{
  height: 20%;
  background-color:#d2e0e0;
  margin-top: 20px;
}
.listCss{
  height: 100%;
  scrollbar-color: #8e8b8b;
  scrollbar-width: 50px;
}

HarmonyOS Next开发学习手册——容器组件(list开发)_第2张图片

添加侧边索引栏

设置indexer属性为自定义索引时,索引栏会显示在列表右边界处,indexer属性设置为true,默认为字母索引表。


你可能感兴趣的:(移动开发,鸿蒙开发,HarmonyOS,harmonyos,学习,移动开发,ui,自定义控件)