OpenHarmony实战开发-Swiper高度可变化效果实现。

最新推荐文章于 2024-08-26 16:31:40 发布

码牛程序猿

最新推荐文章于 2024-08-26 16:31:40 发布

阅读量921

点赞数 11

分类专栏：鸿蒙鸿蒙工程师 HarmonyOS 文章标签： harmonyos OpenHarmony 华为鸿蒙鸿蒙应用开发 HarmonyOS 鸿蒙系统

本文链接：https://blog.csdn.net/2401_82546228/article/details/137978307

版权

本文介绍了如何在应用中使用Swiper组件实现页面高度随滑动变化的动画效果，包括使用逐帧回调优化性能，以及在鸿蒙系统中的应用。同时提供了相关教程和开发资源链接。

摘要由CSDN通过智能技术生成

介绍

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

效果图预览

在这里插入图片描述
使用说明

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

实现思路

实现方案如下：

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

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

  // swiper第二个page
  this.GridBuilderFunction(this.dataPageTwo, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
  // swiper第三个page
  this.GridBuilderFunction(this.dataPageThree, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE)
  // swiper第四个page
  this.GridBuilderFunction(this.dataPageFour, Const.GRID_DOUBLE_HEIGHT, Const.GRID_TEMPLATE