How to Add Bottom Margin to a List Inside a Refresh Component

Read the original article：How to Add Bottom Margin to a List Inside a Refresh Component

Question

How can I add a customizable bottom margin to a List wrapped inside a Refresh component, so that when scrolled to the bottom the content and background keep a gap from the screen edge, but extend fully when not at the bottom?

Short Answer

Set a bottom margin and optional border radius on the last ListItem. This margin creates the gap at the bottom only when scrolled to the end, while the rest of the list fills the screen. Here you can find the code example below;

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false;
  @State arr: string[] = ['0','1','2','3','4','5','6','7','8','9','10'];
  private bottomMargin: number = 30;
  private borderRadius: number = 20;

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing }) {
        List() {
          ForEach(this.arr, (item: string, index: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(80)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .backgroundColor(0xFFFFFF);
            }
            .borderRadius({
              bottomLeft: index === this.arr.length - 1 ? this.borderRadius : 0,
              bottomRight: index === this.arr.length - 1 ? this.borderRadius : 0
            })
            .clip(true)
            .margin({ bottom: index === this.arr.length - 1 ? this.bottomMargin : 0 });
          }, (item: string) => item)
        }
        .borderRadius({
          topLeft: this.borderRadius,
          topRight: this.borderRadius
        })
        .divider({ strokeWidth: 2, color: Color.Black })
        .width('70%')
        .height('100%')
        .alignListItem(ListItemAlign.Center)
        .scrollBar(BarState.Off);
      }
      .width('100%')
      .backgroundColor(0x89CFF0)
      .refreshOffset(64)
      .pullToRefresh(true)
      .onRefreshing(() => {
        setTimeout(() => { this.isRefreshing = false }, 2000);
        console.log('Refreshing triggered');
      });
    }
  }
}

Applicable Scenarios

When using Refresh to wrap a List, and you want the list content and background to leave a space from the bottom edge only after scrolling fully, for better UI aesthetics.

Written by Emincan Ozcan