【HarmonyOS NEXT】滑动选中放大卡片效果

【HarmonyOS NEXT】滑动选中放大卡片效果

鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 （金融理财

一、功能效果：

1.横向滚动列表，手势左右滑动，居中选中会放大。

2. 左边滑动到首部，在居中位置。同理，尾部也在居中位置。

3.放大选中和滑动滚动效果丝滑。

二、开发思路:

【完整代码请参考章节三】

1.使用list实现横向滚动列表的效果

  @Builder ListView(){
    List({ space: 20, initialIndex: this.currentSwiperIndex }) {


    }
    .width('100%')
    .height(270)
    .chainAnimation(true)
    .alignListItem(ListItemAlign.End)
    .edgeEffect(EdgeEffect.None)
    .listDirection(Axis.Horizontal)
    .scrollSnapAlign(ScrollSnapAlign.CENTER)
    .scrollBar(BarState.Off)

  }

2.根据数据量决定是否使用赖加载来提升性能，若数据量较小，可以直接使用Foreach循环。

   LazyForEach(this.mListData, (item: string, index: number) => {
        ListItem() {
          Column() {
            Image($r("app.media.icon_img1"))
              .width(px2vp(350))
              .height(px2vp(600))
              .borderWidth(px2vp(2))
              .borderColor(Color.Red)
              .backgroundColor(Color.Black)
          }
          .backgroundColor(Color.Red)
          .width(px2vp(350))
          .height(px2vp(600))
          .animation({
            duration: 200,
            curve: Curve.Linear,
          })
          .margin({ bottom: 30 })
          .zIndex(10)
        }
      })

3.居中项放大使用放大动画实现，居中index根据list回调来更新

        ListItem() {}
         .scale({
            x: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
            y: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
          })


    List({ space: 20, initialIndex: this.currentSwiperIndex }) {}
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
      this.currentSwiperIndex = centerIndex
    })

三、DEMO示例代码:

@Entry
@Component
struct Index {

  @State mListData: MyDataSource = new MyDataSource();
  @State maxScale: number = 1.2;
  @State minScale: number = 0.8;
  @State currentSwiperIndex: number = 0;

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.mListData.pushData(`Hello ${i}`)
    }
  }

  @Builder ListView(){
    List({ space: 20, initialIndex: this.currentSwiperIndex }) {
      LazyForEach(this.mListData, (item: string, index: number) => {
        ListItem() {
          Column() {
            Image($r("app.media.icon_img1"))
              .width(px2vp(350))
              .height(px2vp(600))
              .borderWidth(px2vp(2))
              .borderColor(Color.Red)
              .backgroundColor(Color.Black)
          }
          .backgroundColor(Color.Red)
          .width(px2vp(350))
          .height(px2vp(600))
          .scale({
            x: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
            y: this.currentSwiperIndex === index ? this.maxScale : this.minScale,
          })
          .animation({
            duration: 200,
            curve: Curve.Linear,
          })
          .margin({ bottom: 30 })
          .zIndex(10)
        }
      })

    }
    .width('100%')
    .height(270)
    .chainAnimation(true)
    .alignListItem(ListItemAlign.End)
    .edgeEffect(EdgeEffect.None)
    .listDirection(Axis.Horizontal)
    .scrollSnapAlign(ScrollSnapAlign.CENTER)
    .scrollBar(BarState.Off)
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
      this.currentSwiperIndex = centerIndex
    })
  }


  build() {
    Column(){
      SlidingCardView()
      this.ListView()
    }
    .width("100%")
    .height("100%")
  }
}