#跟着晓明学鸿蒙# 商品展示的分类导航与搜索
目录
案例介绍代码实现代码详解分类导航实现搜索栏实现商品筛选功能总结案例介绍
在电商应用中，分类导航和搜索功能是帮助用户快速找到目标商品的重要功能。本案例将展示如何实现商品分类导航和搜索功能。
代码实现
@Entry @Component struct ECommerceHomePage { @State currentCategory: string = '全部' @State screenWidth: number = 0 // 商品分类 private categories: string[] = ['全部', '手机', '电脑', '家电', '服饰', '美妆', '食品', '图书'] // 商品数据 private products: Array<{ id: number, name: string, price: number, originalPrice: number, image: string, category: string, sales: number, rating: number }> = [ { id: 1, name: '智能手机 Pro', price: 4999, originalPrice: 5999, image: '/assets/phone1.jpg', category: '手机', sales: 1000, rating: 4.8 }, { id: 2, name: '超薄笔记本电脑', price: 6999, originalPrice: 7999, image: '/assets/laptop1.jpg', category: '电脑', sales: 500, rating: 4.7 } ] // 获取当前分类的商品 private getCurrentProducts(): Array<any> { if (this.currentCategory === '全部') { return this.products } else { return this.products.filter(product => product.category === this.currentCategory) } } build() { Column() { // 顶部搜索栏 Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) { Image('/assets/search_icon.png') .width(20) .height(20) .margin({ right: 10 }) TextInput({ placeholder: '搜索商品' }) .width('100%') .height(40) .backgroundColor('transparent') } .backgroundColor('#EEEEEE') .borderRadius(20) .padding({ left: 15, right: 15 }) .width('90%') .height(40) } .width('100%') .height(60) .backgroundColor(Color.White) // 商品分类导航 Scroll() { Row() { ForEach(this.categories, (category: string) => { Text(category) .fontSize(16) .fontColor(this.currentCategory === category ? '#FF6B00' : '#333333') .fontWeight(this.currentCategory === category ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(this.currentCategory === category ? '#FFF0E6' : 'transparent') .borderRadius(15) .padding({ left: 15, right: 15, top: 8, bottom: 8 }) .margin({ right: 10 }) .onClick(() => { this.currentCategory = category }) }) } } .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .width('100%') .height(50) .padding({ left: 15 }) .backgroundColor(Color.White) .margin({ bottom: 10 }) // 商品推荐标题 Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { Text('商品推荐') .fontSize(18) .fontWeight(FontWeight.Bold) Text('查看更多 >') .fontSize(14) .fontColor('#666666') } .width('100%') .padding({ left: 15, right: 15, top: 15, bottom: 10 }) // 商品展示区域 Scroll() { Flow() { ForEach(this.getCurrentProducts(), (product) => { FlowItem() { // 商品卡片内容 } .margin(8) }) } .width('100%') .padding(8) } .width('100%') .layoutWeight(1) } .width('100%') .height('100%') .backgroundColor('#F5F5F5') } }
ts
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118代码详解
分类导航实现分类数据管理：
@State currentCategory: string = '全部' private categories: string[] = ['全部', '手机', '电脑', '家电', '服饰', '美妆', '食品', '图书']
ts
12 使用currentCategory记录当前选中的分类categories数组存储所有分类分类标签实现：
Text(category) .fontSize(16) .fontColor(this.currentCategory === category ? '#FF6B00' : '#333333') .fontWeight(this.currentCategory === category ? FontWeight.Bold : FontWeight.Normal) .backgroundColor(this.currentCategory === category ? '#FFF0E6' : 'transparent') .onClick(() => { this.currentCategory = category })
ts
12345678 根据选中状态设置不同样式点击时更新当前分类 搜索栏实现 搜索框布局：Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) { Image('/assets/search_icon.png') TextInput({ placeholder: '搜索商品' }) } .backgroundColor('#EEEEEE') .borderRadius(20) }
ts
12345678 使用Flex布局实现搜索框添加搜索图标和输入框 商品筛选功能商品筛选方法：
private getCurrentProducts(): Array<any> { if (this.currentCategory === '全部') { return this.products } else { return this.products.filter(product => product.category === this.currentCategory) } }
ts
1234567 根据当前分类筛选商品全部分类显示所有商品商品展示更新：
ForEach(this.getCurrentProducts(), (product) => { FlowItem() { // 商品卡片内容 } })
ts
12345 使用getCurrentProducts获取当前分类的商品分类切换时自动更新显示的商品总结
本案例展示了如何在商品展示页面中实现分类导航和搜索功能。通过合理的状态管理和数据筛选，实现了商品的分类展示。搜索栏和分类导航的设计提供了良好的用户体验，帮助用户快速找到目标商品。
相关知识
百度地图适配华为鸿蒙HiCar：支持车道级导航、智能巡航等功能
华为花瓣地图App公交导航功能新升级：鸿蒙系统再添便捷出行体验
百度地图原生鸿蒙版 7 月更新速览发布
鸿蒙版百度地图大更新！新增手机与手表、车机互联、添加常用地址
昆明学插花
手把手教你开发第一个HarmonyOS （鸿蒙）移动应用
鸿蒙系统：如何使用前端技术/JS开发鸿蒙应用？
如何提高网店商品的转化率
开学装备升级指南！鸿蒙原生版学习App的“效率外挂”藏不住了
一网打尽！电商网站导航设计超全面指南
网址: #跟着晓明学鸿蒙# 商品展示的分类导航与搜索 https://m.huajiangbk.com/newsview2531008.html
| 上一篇: 线上小程序商城售卖鲜花的功能需求 |
下一篇: 花瓣引擎拍照搜索服务 |
