鸿蒙(HarmonyOS)应用开发实战——Swiper高度可变化效果实现

往期知识点整理

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 被裁员后，踏上了鸿蒙开发求职之路
• 持续更新中……

介绍

在很多应用中，swiper组件每一个page的高度是不一致的，所以需要swiper组件下方页面的高度跟着一起变化。

效果图预览

使用说明

向左滑动swiper组件，上方swiper组件高度变高，下方页面随着swiper的变化而平滑的变化。

实现思路

实现方案如下：

1. 生成四个Swiper页面，来进行左右滑动，GridBuilderFunction是生成Swiper的page。

Swiper() {
   
   
  Column() {
   
   
    Stack() {
   
   
      Text('功能栏')
        .textAlign(TextAlign.Center)
        .margin({
   
    top: $r('app.integer.swipersmoothvariation_margin_small'), left: $r('app.integer.swipersmoothvariation_default_padding') })
            // swiper第一个page
        this.GridBuilderFunction(this.dataPageOne, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
    }
    .alignContent(Alignment.TopStart)
  }

  // swiper第二个page