HarmonyOS 资讯类demo

请提供一个资讯类菜单选择的demo。

HarmonyOS
2024-10-16 10:05:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

菜单类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)  
  }  
}
分享
微博
QQ
微信
回复
2024-10-16 17:31:02
相关问题
HarmonyOS 商城应用demo
307浏览 • 1回复 待解决
HarmonyOS有没有通用工具的样例Demo
356浏览 • 1回复 待解决
HarmonyOS 加解密 demo
451浏览 • 1回复 待解决
HarmonyOS应用更新demo
292浏览 • 1回复 待解决
HarmonyOS viewModal demo问题
362浏览 • 1回复 待解决
HarmonyOS 上传文件相关Demo
447浏览 • 1回复 待解决
HarmonyOS Navigation透明页demo
193浏览 • 1回复 待解决
HarmonyOS 模板快载demo
275浏览 • 1回复 待解决
HarmonyOS获取deviceid的demo
383浏览 • 1回复 待解决
HarmonyOS 图像裁剪的demo
276浏览 • 1回复 待解决
HarmonyOS 滑块认证的demo
114浏览 • 1回复 待解决
HarmonyOS 消息通知使用示例demo
281浏览 • 1回复 待解决
HarmonyOS 弹窗不与页面绑定demo
232浏览 • 1回复 待解决
HarmonyOS 自定义相机demo
234浏览 • 1回复 待解决
有偿 求 HarmonyOS 串口DEMO源码
7438浏览 • 1回复 待解决
HarmonyOS如何获取一个的父名称
633浏览 • 3回复 待解决
HarmonyOS 录音,希望能有录音Demo
154浏览 • 1回复 待解决
HarmonyOS 即时通讯相关demo
221浏览 • 1回复 待解决
HarmonyOS 全局自定义弹窗demo
264浏览 • 1回复 待解决
HarmonyOS 自定义相机演示demo
177浏览 • 1回复 待解决
HarmonyOS MD5加密相关demo
450浏览 • 1回复 待解决
HarmonyOS 请提供个路由跳转Demo
364浏览 • 1回复 待解决
HarmonyOS 手势设置和校验的demo
285浏览 • 1回复 待解决
HarmonyOS 60秒倒计时demo
112浏览 • 1回复 待解决
requestPermissionsFromUser使用Demo
1571浏览 • 1回复 待解决