HarmonyOS鸿蒙Next中当List内容未溢出时如何实现滚动且触发链式动画

HarmonyOS鸿蒙Next中当List内容未溢出时如何实现滚动且触发链式动画 当List的高度超过父容器高度时，能正常滚动且触发链式动画。但当List高度未超过父容器高度时，无法滚动且无法触发链式动画。如何操作能实现List高度未超过父容器时也能触发滚动和链式动画

build(){
  HdsNavDestination(){
    List({space:20}){
      ListItem().height(100)
      ListItem().height(100)
      ListItem().height(100)
      ListItem().height(100)
    }
      .width('100%')
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      .listDirection(Axis.Vertical)
      .chainAnimation(true)
      .padding({left:16,right:16})
      .friction(3)
      .fadingEdge(true, { fadingEdgeLength: LengthMetrics.vp(80) })
  }
}

更多关于HarmonyOS鸿蒙Next中当List内容未溢出时如何实现滚动且触发链式动画的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

尊敬的开发者，您好，
List滚动触发的本质是内容高度大于可视高度，如果内容高度较小可以增加透明ListItem增加高度达到大于Lsit可视高度触发滚动和链式动画。若未能解决问题请详细描述功能场景和实现效果，感谢您的理解与支持。

更多关于HarmonyOS鸿蒙Next中当List内容未溢出时如何实现滚动且触发链式动画的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


尊敬的开发者，您好！您的问题已受理，请您耐心等待，感谢您的理解与支持！

核心原因是 ArkUI 的链式动画只会在 List 滚动时触发，而当 List 高度未超过父容器时，滚动区域为零，自然无法滚动，也就没有链式动画。

第一种解方法就是让 List 的内容区域始终超出可用空间，强制产生滚动。

第二种使用Scroll 组件，Scroll 组件有独立的滚动区域，不依赖 List 是否溢出。

第三种让父容器有明确高度，List 设置一个足够大的 minHeight。

第四种用 layoutWeight 分配剩余空间，让 List 占满父容器的所有剩余空间，从而触发滚动能力。

其实我觉得这种可以叫做视觉欺骗，在写项目的时候经常用到，更加专业的名词我也没听过

如有帮助给个采纳谢谢

List高度未超过父容器，也就是List无法滑动，那么这个链式动画肯定不能触发，

这个时候你想触发链式动画，也就是想让List可以滑动，那就在List的最后再添加一个ListItem().height(500)占位，

import { LengthMetrics } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  build() {
    Column() {
      List({ space: 20 }) {
        ListItem().width('100%').height(500).backgroundColor('#857')
        ListItem().width('100%').height(500).backgroundColor('#898')
        ListItem().width('100%').height(500).backgroundColor('#559')
        ListItem().width('100%').height(500).backgroundColor('#330')
      }
      .width('100%')
      .height('100%')
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      .listDirection(Axis.Vertical)
      .chainAnimation(true)
      .padding({ left: 16, right: 16 })
      .friction(3)
      .fadingEdge(true, { fadingEdgeLength: LengthMetrics.vp(80) })
    }.width('100%')
    .height('100%')
  }
}

可以动态获取List内的内容高度，如果超过List高度则罢了，如果高度不够，则在List内部最底下插入空白组件，高度补全缺失高度，代码如下：

List({ scroller: this.scroller }) {
  ListItemGroup() {
    LazyForEach(this.playlistsDataSource, (playlist: Playlist) => {
      ListItem() {
        // 内容
      }
    }, (playlist: Playlist, index: number) => `${playlist.id}-${index}`)
  }
  .onAreaChange((_: Area, newValue: Area) => {
    this.groupHeight = newValue.height as number
  })

  ListItem(){
    Row(){
      // 监控ListItemGroup高度变化，随时调整List下方补充高度：窗口高度-内容高度
      Blank().height(this.winHeight - this.groupHeight - 10)
    }
  }
}
.width(StyleConstants.FULL_WIDTH)
.height(StyleConstants.FULL_HEIGHT)
.chainAnimation(true)
.layoutWeight(1)

最好多补充一点，因为恰好高度要大于List高度，才会出发链式动画。如果需要避让底部导航栏可以再减去导航栏高度。

只有将list的高度固定算死，小于父组件才行。

在HarmonyOS NEXT中，通过设置List的edgeEffect为EdgeEffect.Spring或EdgeEffect.Fade，并启用alwaysScrollEnabled(true)，可使未溢出内容支持滚动。利用onScrollIndex事件监听滚动，在回调中调用组件animateTo启动链式动画。

回到顶部