鸿蒙开发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%')
  }

四、项目demo源码结构图：

有问题或者需要完整源码的私信我，我每天都看私信的