HarmonyOS鸿蒙Next中ListItem底部触底加载LoadingProgress()动画失效

背景知识：

楼主在使用list+listIltem时，要注意一下边距问题。从上述你得代码调试过程中可以知道，Loading中添加了.margin({right:’-100%”])出现的问题，只要在源码基础上注释掉这个就可以了，但是注释掉后又会出现 Loading布局居左问题。建议楼主使用grid布局来进行网络布局。

问题解决：

代码实例：

interface ItemType {
    name: string
    age: number
}


@Component
export struct Loading {
    @Prop isAllShow: boolean

    build() {
        if (this.isAllShow) {
            Row() {
                Text(`没有更多啦`)
                    .fontSize(14)
                    .fontColor('#BD4B1F')
            }
            .width('100%')
            .height(30)
            .justifyContent(FlexAlign.Center)
            .margin({ top: 2 })
        } else {
            Row({ space: 5 }) {
                Text('加载中')
                    .fontSize(9)
                    .fontColor('#BD4B1F')
                LoadingProgress()
                    .width("30")
                    .height("30")
                    .color("#BD4B1F")
            }
            .height(30)
            .width('100%')
            .height("50")
            .margin({ top: 5 })
            .justifyContent(FlexAlign.Center)
        }


    }
}


@Entry
@Component
struct LoadingPage {
    @State message: string = 'Hello World';
    @State person: ItemType[] = [
        { name: "张三", age: 20 },
        { name: "李四", age: 22 },
        { name: "王五", age: 19 },
        { name: "赵六", age: 21 },
        { name: "钱七", age: 23 },
        { name: "孙八", age: 20 },
        { name: "周九", age: 24 },
        { name: "吴十", age: 18 },
        { name: "郑十一", age: 22 },
        { name: "王十二", age: 21 },
        { name: "刘十三", age: 19 },
        { name: "陈十四", age: 20 },
        { name: "杨十五", age: 25 },
        { name: "黄十六", age: 22 },
        { name: "赵十七", age: 18 },
        { name: "林十八", age: 21 },
        { name: "张十九", age: 23 },
        { name: "李二十", age: 20 },
        { name: "王二一", age: 19 },
        { name: "刘二二", age: 22 }
    ]

    pushList() {
        setTimeout(() => {
            for (let i = 0; i < 20; i++) {
                this.person.push({ name: `张三${i}`, age: i })
            }
        }, 2000)
    }

    build() {
        Column() {
            List() {
                ForEach(this.person, (item: ItemType, index) => {
                    ListItem() {
                        Column() {
                            Row() {
                                Text('姓名：')
                                Text(item.name)
                                Text((index + 1).toString())
                                    .margin({ left: 20 })
                            }

                            Row() {
                                Text('年龄：')
                                Text(item.age.toString())
                            }
                        }
                        .margin({ bottom: 20 })
                        .backgroundColor('#BD4B1F')
                    }
                })
                ListItem() {
                    Loading({ isAllShow: false })
                }
                .height(50)
            }
            .lanes(2)
            .onReachEnd(() => {
                this.pushList()
            })

        }
    }
}

真机演示：