HarmonyOS 鸿蒙Next List组件的使用之商品列表（ArkTS）

HarmonyOS 鸿蒙Next List组件的使用之商品列表（ArkTS） 鸿蒙场景化代码

介绍

基于ArkTS，使用List组件，实现了商品列表的懒加载、下拉刷新与列表触底提示并回弹的效果。

demo详情链接

https://gitee.com/scenario-samples/list

1 回复

更多关于HarmonyOS 鸿蒙Next List组件的使用之商品列表（ArkTS）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）中，Next List组件用于展示商品列表时，可以通过ArkTS（Ark TypeScript）进行高效开发。以下是鸿蒙场景化代码示例，用于实现一个简单的商品列表展示：

@Entry
@Component
struct ListDemo {
    @State items: Array<any> = [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        // 更多商品数据
    ];

    build() {
        Column() {
            List({ space: 20 }) {
                ForEach(this.items, (item) => {
                    ListItem() {
                        Row() {
                            Text(item.name).fontSize(18).fontWeight(FontWeight.Bold)
                            Text(' 价格:￥' + item.price).fontSize(16).color(Color.Gray)
                        }
                    }
                })
            }
            .listDirection(Axis.Vertical)
        }
    }
}

上述代码定义了一个ListDemo组件，其中包含一个商品列表。items状态变量存储了商品数据，List组件通过ForEach循环渲染每个商品项。每个商品项以Row布局展示商品名称和价格。

注意：

  • 确保ArkTS开发环境已正确配置。
  • 商品数据可以根据实际需求动态加载或修改。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部