下拉刷新使用Refresh嵌套List实现。刷新逻辑在onRefreshing回调方法中执行。上拉加载更多给List添加onReachEnd事件回调。列表滑动到底部时触发。示例代码如下:

build() {
  Column() {
    // Search box at the top
    this.searchBarBuilder()
    // Pull down refresh component
    Refresh({ refreshing: $$this.isRefreshing }) {
      // List component as long list layout
      List({ space: 10 }) {
        // ListItem Customize the Swiper carousel module
        ListItem() {
          this.bannerBuilder()
        }
        // ListItem Custom Grid Quick Access Module
        ListItem() {
          this.quickBuilder()
        }
        // ListItem Custom Column Flash Sale Module
        ListItem() {
          this.flashBuilder()
        }
        // ListItemGroup Product Classification List
        this.productsBuilder()
        // 最后ListItem Customize bottom loading for more
        ListItem() {
          this.footerLoadingBuilder()
        }.height(50).width('100%').backgroundColor(0xeeeeee)
      }
      .sticky(StickyStyle.Header)
      .height('100%')
      // List component hits bottom to simulate network requests
      .onReachEnd(() => {
        // Load more data logic
      })
    }
    // Pull down refresh simulation network request
    .onRefreshing(() => {
      // Data refresh logic
    })
    .layoutWeight(1)
    .width('100%')
  }
}
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐