HarmonyOS 鸿蒙Next 希望提供资讯类菜单选择 demo

@Entry
@Component
struct Index {
  @State navList: string[] =
    ['首页', '手机', '电脑', '食品', '男装', '生鲜', '家具', '厨具', '男装', '生鲜', '家具', '厨具']
  @State titleIndex: number = 0
  @State pageIndex: number = 0
  @State alignListItem: ListItemAlign = ListItemAlign.Start
  build() {
    Flex({ direction: FlexDirection.Row }) {
      List({ space: 10 }) {
        ForEach(this.navList, (item: Resource, index?: number) => {
          ListItem() {
            Text(item)
              .fontSize(16)
              .fontColor(this.titleIndex == index ? Color.Red : Color.Black)
              .decoration({
                type: this.titleIndex == index ? TextDecorationType.Underline : TextDecorationType.None,
                color: Color.Red
              })
              .onClick(() => {
                if (index != undefined) {
                  this.titleIndex = index
                }
              })
          }
        }, (item: Resource) => JSON.stringify(item))
      }
      .alignListItem(this.alignListItem)
      .scrollBar(BarState.Off)
      .listDirection(Axis.Horizontal)
      .width("90%")
      Row() {
        Image($r('app.media.ic_split_line'))
          .width(1)
          .height(14)
        Image($r('app.media.ic_more'))
          .width(16)
          .height(16)
          .margin({
            left: 2,
            right: 2
          })
        Text('分类')
          .fontSize(16)
          .fontColor(Color.White)
          .fontWeight(this.titleIndex === undefined ? 700 : 400)
      }.onClick(() => {
        this.titleIndex = 0;
      })
    }
    .backgroundColor(Color.Pink)
    .padding(10)
    .height(50)
    .align(Alignment.Center)
  }
}