@abner refresh How to show No more data when there is no data at the bottom

Read the original article：@abner refresh How to show No more data when there is no data at the bottom

Requirement Description

@abner/refresh How to display "No more data" when there is no data at the bottom?

Background Knowledge

@abner/refresh is a simple and efficient pull-to-refresh component that supports lists, grids, and waterfall layouts. It supports refreshing various arbitrary components, as well as features like swipe-to-delete, sticky headers, and scrolling to the second floor.

Implementation Steps

@abner/refresh component can use the RefreshController.finishLoadMore method, setting the parameter to true to indicate no more data. The LoadMoreFooterAttr can be used to set the display information for loading data, including pull-down prompts, release prompts, no data prompts, etc.

The example code is as follows:

import { ListView, LoadMoreFooterAttr, RefreshController } from '@abner/refresh';

@Entry
@Component
struct RefreshExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5];
  private refreshController: RefreshController = new RefreshController

  build() {
    Column() {
      ListView({
        items: this.arr, // Data source: array, any type
        itemLayout: (item) => this.itemLayout(),
        controller: this.refreshController, // Controller, used to close pull-down and pull-up actions
        onLoadMore: () => {
          // Pull-up to load more
          this.refreshController.finishLoadMore(true);
        },
        loadMoreFooterAttribute: (attribute: LoadMoreFooterAttr) => {
          attribute.footerNothingText = 'No more data available';
          attribute.fontColor = Color.Red;
        },
      })
    }
  }

  @Builder
  itemLayout() {
    Row() {
      Text('item data')
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(150)
  }
}

Written by Muhammet Cagri Yilmaz