当前位置：首页 > news >正文

鸿蒙开发List滑动每项标题切换悬停

news 来源：原创 2025/6/24 8:33:02

鸿蒙开发List滑动每项标题切换悬停

鸿蒙List滑动每项标题切换悬停，功能也很常见

一、效果图：

在这里插入图片描述

二、思路：

ListItemGroup({ header: this.itemHead(secondClassify, index) })

三、关键代码：

  build() {Column() {List() {ListItem() {Image($r("app.media.yishi")).height(180).width('100%')}LazyForEach(this.data, (secondClassify: Classify, index: number) => {ListItemGroup({ header: this.itemHead(secondClassify, index) }) {LazyForEach(this.getItemBaseDataSource(secondClassify.commodityList),(classifyCommodity: Commodity, i: number) => {ListItem() {this.itemBuilder(classifyCommodity);}}, (classifyCommodity: Commodity) => JSON.stringify(classifyCommodity))}.divider({ strokeWidth: 1, color: '#ededed' })}, (secondClassify: Classify) => JSON.stringify(secondClassify))}.width('100%').height('100%').cachedCount(1).scrollBar(BarState.Off).edgeEffect(EdgeEffect.None).alignListItem(ListItemAlign.Start).sticky(StickyStyle.Header | StickyStyle.Footer) // 设置吸顶，实现粘性标题效果}.height('100%').width('100%')}