#鸿蒙通关秘籍#如何设计 HarmonyOS Next 触底加载更多数据的交互界面？

触底加载更多的交互可以通过 LoadingMoreView 组件来实现，定义不同交互状态，示例如下：

@Extend(Text)
function textStyle() {
  .fontSize(13).fontColor('#999').lineHeight(20)
}

@Component
export default struct LoadingMoreView {
  @Link visible: boolean;
  @Prop status: number = 0;

  build() {
    Row() {
      if (this.status === 0) {
        Text('—— 下拉加载更多 ——').textStyle();
      } else if (this.status === 1) {
        Row({ space: 5 }) {
          Image($r('app.media.loading'))
            .width(20)
            .transition(TransitionEffect.rotate({ angle: -360 })
              .animation({ duration: 2000, curve: Curve.Linear, iterations: -1 }));
          Text('正在加载').textStyle();
        }
      } else if (this.status === 2) {
        Text('—— 已到底了 ——').textStyle();
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .padding(5)
    .visibility(this.visible ? Visibility.Visible : Visibility.None);
  }
}

通过 status 参数控制组件的显示状态，比如初始、加载中、已到底，通过 visible 参数可以控制组件是否可见。