How to make the Swiper component switch to the previous element instead of the first one when deleting data?

Read the original article：How to make the Swiper component switch to the previous element instead of the first one when deleting data?

How to make the Swiper component switch to the previous element instead of the first one when deleting data?

Problem Description

How to make the Swiper component switch to the previous element instead of the first one when deleting data? How to implement the animation during the transition?

Background Knowledge

When using Swiper to manage a horizontally scrollable component, it was found that when deleting data from the list, Swiper would default to switching to the first element.
pop removes and returns the last element from an ArkTS Array. It supports transition animations. push adds an element to the end of an ArkTS Array and returns the new length of the Array.
The showNext and showPrevious methods allow the Swiper to flip to the next or previous page when the data source changes. The transition effect is controlled by the duration attribute of the Swiper.

Solution

Scenario 1: Implementing the Swiper component to switch to the previous element instead of the first one when deleting data, without any transition animation.
By binding the index attribute, which supports two-way binding with variables using $$, and using an array to manage the Swiper's data, the deletion operation can be implemented using the pop() method. By default, Swiper will reset to the first element when the data source changes. To prevent this, the controller needs to be used to forcibly specify the target position.
Example code is as follows:

@Entry
@Component
struct SwiperDeletesDataToPreviousElementTwo {
  private swiperController: SwiperController = new SwiperController();
  @State data: number[] = [];
  @State total: number = 2;
  index: number = 0;
  aboutToAppear(): void {
    for (let i = 0; i <= this.total; i++) {
      this.data.push(i);
    }
  }
  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        ForEach(this.data, (item: number) => {
          Text((item + 1) + '')
            .width('100%')
            .height(160)
            .backgroundColor(0x4FB8C8)
            .textAlign(TextAlign.Center)
            .fontSize(30);
        }, (item: string) => item);
      }
      .index($$this.index)
      .indicator(Indicator.digit()
        .top(200)
        .fontColor(Color.Red)
        .selectedFontColor(Color.Red)
        .digitFont({ size: 20, weight: FontWeight.Bold })
        .selectedDigitFont({ size: 20, weight: FontWeight.Normal }))
      .displayArrow(true, false)
      .cachedCount(3)
      .loop(false);

      Row({ space: 10 }) {
        Button('Add').onClick(() => {
          this.data.push(this.total++);
          this.swiperController.showNext();
        }).fontSize(13);
        Button('Remove').onClick(() => {
          this.data.pop();
          this.swiperController.showPrevious();
        }).fontSize(13);
      };
    }
    .width('100%')
  }
}

Output:

Scenario 2: Implementing the Swiper component to switch to the previous element instead of the first one when deleting data, with a transition animation.
This can be achieved by using the showNext and showPrevious methods of the Swiper component, which by default include a transition effect.
Example code is as follows:

@Entry
@Component
struct SwiperDeletesDataToPreviousElementTwo {
  private swiperController: SwiperController = new SwiperController();
  @State data: number[] = [];
  @State total: number = 2;
  index: number = 0;
  aboutToAppear(): void {
    for (let i = 0; i <= this.total; i++) {
      this.data.push(i);
    }
  }
  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        ForEach(this.data, (item: number) => {
          Text((item + 1) + '')
            .width('100%')
            .height(160)
            .backgroundColor(0x4FB8C8)
            .textAlign(TextAlign.Center)
            .fontSize(30);
        }, (item: string) => item);
      }
      .index($$this.index)
      .indicator(Indicator.digit()
        .top(200)
        .fontColor(Color.Red)
        .selectedFontColor(Color.Red)
        .digitFont({ size: 20, weight: FontWeight.Bold })
        .selectedDigitFont({ size: 20, weight: FontWeight.Normal }))
      .displayArrow(true, false)
      .cachedCount(3)
      .loop(false);
      Row({ space: 10 }) {
        Button('Add').onClick(() => {
          this.data.push(this.total++);
          this.swiperController.showNext();
        }).fontSize(13);
        Button('Remove').onClick(() => {
          this.data.pop();
          this.swiperController.showPrevious();
        }).fontSize(13);
      };
    }
    .width('100%');
  }
}

Here is the ouptuted screen according to scenario.

Verification Result

This example supports API Version 20 Release and later versions.
This example supports HarmonyOS 6.0.0 Release SDK and later versions.
This example requires DevEco Studio 6.0.0 Release or later for building and running.

Written by Emine Inan