HarmonyOS 如何实现列表快速滑动时不加载,停下来时才加载

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

请参考以下demo:

使用isScroll来控制是否加载PDF那个组件(这里用Text代替),不渲染时,最好有个占位图(Image);

onScrollStart、onScrollStop用来改变isScroll状态;

@Entry
@Component
export struct MyList {

  @State isScroll: boolean = false
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

  build() {
    Column() {

      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            if (!this.isScroll) {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            } else {
              Image($r("app.media.app_icon"))
                .width("100%")
                .height(100)
            }
          }
        }, (item: string) => item)
      }
      .onScrollStart(() => {
        this.isScroll = true
      })
      .onScrollStop(() => {
        this.isScroll = false
      })
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })

  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS list组件如何设置匀速滑动
58浏览 • 1回复 待解决
刷新列表加载更多问题
348浏览 • 1回复 待解决
HarmonyOS 列表展示list懒加载问题
657浏览 • 1回复 待解决
键盘拉起列表无法上下滑动
2188浏览 • 1回复 待解决
使用LazyForEach懒加载列表相关问题
887浏览 • 1回复 待解决
HarmonyOS 如何实现加载网页的能力?
252浏览 • 1回复 待解决
如何实现Fraction懒加载功能?
7454浏览 • 1回复 待解决
如何HarmonyOS实现动态加载模块?
211浏览 • 1回复 待解决