【代码案例】HarmonyOS 鸿蒙Next 首页下拉进入二楼效果案例

发布于 1周前 作者 songsunli 来自 鸿蒙OS

【代码案例】HarmonyOS 鸿蒙Next 首页下拉进入二楼效果案例 HarmonyOS Next应用开发案例（持续更新中……）

本案例完整代码，请访问：代码仓库

本案例已上架HarmonyOS NEXT开源组件市场，如需获取或移植该案例，可安装此插件。开发者可使用插件获取鸿蒙组件，添加到业务代码中直接编译运行。

介绍

本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。

效果图预览

效果图

使用说明

  1. 向下滑动首页页面超过回弹触发高度位于中间部分时，页面触发刷新列表数据，刷新完成后回弹。
  2. 向下滑动首页页面超过刷新列表触发高度，页面进入二楼。
  3. 向下滑动未超过触发高度页面回弹。
  4. 二楼页面向上滑动超过触发高度，页面进入首页，未超过触发高度页面回弹。
  5. 效果图因要展示动效效果对展开速度进行了调整，可以通过SecondFloor.ets中expandSecondFloor的动效时长来调整二楼展开的速度，也可通过FloorView.ets中的OFFSET_STEP和EXPAND_FLOOR_INTERVAL_TIME来调整一楼展开的速度。

实现思路

本例涉及的关键特性和实现方案如下：

  1. 使用Column布局将一楼页面二楼页面包裹，使用position将一、二楼页面固定，floorHeight设置二楼高度（初始Y轴为负的二楼高度），使用clip按指定的形状对当前组件进行裁剪，源码参考SecondFloor.ets和FloorView.ets。

  2. 通过对Column设置onTouch属性，记录手指按下和离开屏幕Y轴坐标，判断手势是上/下滑，当下滑距离达到触发距离进入二楼，未达到触发距离则刷新数据或直接回弹（以一楼页面下滑为例），源码参考SecondFloor.ets。

  3. 使用Row布局将刷新动画包裹，使用rotate实现图片圆圈的转动，源码参考SecondFloor.ets。

  4. 滑动到中间位置时触发刷新动画，刷新时固定高度，刷新完成后回弹到一楼，源码参考SecondFloor.ets。

  5. 在手指滑动结束离开屏幕后，通过判断此时二楼高度与Y轴高度差是否大于触发距离，若大于触发距离将进入二楼，若小于则触发刷新数据或直接回弹（以一楼下滑为例），源码参考SecondFloor.ets。

高性能知识点

本例使用了onTouch事件实时监听获取相关数据，避免在函数中进行冗余或耗时操作，例如应该减少或避免在函数打印日志，会有较大的性能损耗。

本示例使用了setInterval进行页面移动控制，在页面移动到相应的位置后使用clearInterval销毁以降低内存占用。

工程结构&模块类型

secondfloorloadanimation                     // har类型
|---model 
|   |---AppInfo.ets                          // App信息
|   |---UserInformation.ets                  // 用户信息    
|---view
|   |---FloorView.ets                        // 视图层-应用二楼页面
|   |---SecondFloor.ets                      // 视图层-应用一楼页面
|   |---SecondFloorLoadAnimation.ets         // 视图层-应用主页面

模块依赖

参考资料


更多关于【代码案例】HarmonyOS 鸿蒙Next 首页下拉进入二楼效果案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
7 回复

收藏一下，项目中用的到

更多关于【代码案例】HarmonyOS 鸿蒙Next 首页下拉进入二楼效果案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是微信吗？

不是明显的内容。

布局和微信一模一样，下拉最近使用的小程序也和微信布局一模一样。

这是Demo。所以不是微信。

简单来说就是判断滑动距离，不超过就刷新一楼，超过就进入二楼是么？

针对帖子标题【代码案例】HarmonyOS 鸿蒙Next 首页下拉进入二楼效果案例，以下是一个简要的回答：

在HarmonyOS鸿蒙Next系统中，实现首页下拉进入二楼效果通常涉及UI组件的动画处理和事件监听。具体实现可能依赖于鸿蒙系统的ArkUI框架，该框架提供了丰富的组件和动画支持。

实现这一效果的关键步骤包括：

  1. 布局设计：在页面的布局文件中定义首页和二楼的UI组件，确保二楼组件在初始状态下是隐藏或位于屏幕之外的。

  2. 事件监听：为首页添加一个下拉事件监听器，当用户进行下拉操作时触发相应的事件。

  3. 动画处理：在事件触发后，通过动画将二楼组件从隐藏状态或屏幕外平滑地移动到可见区域。动画效果可以根据需求进行调整，如平滑滚动、渐变显示等。

  4. 状态管理：确保在用户操作后，页面状态能够正确更新，以便在用户再次下拉或进行其他操作时能够做出正确的响应。

请注意，以上描述是基于一般性的鸿蒙系统开发知识，并未涉及具体的代码实现。如需详细的代码案例，建议参考鸿蒙系统的官方文档或开发者社区中的相关资源。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部