鸿蒙5 求职招聘类行业实践 推荐岗位-层叠卡片滑动切换动效

📢 重磅福利！参与活动赢好礼，马克杯、鼠标垫、贴纸、8月1日-12月31日等你来！

点击链接：   华为开发者学堂

场景介绍

滑动切换岗位卡片是求职招聘类应用中的典型场景之一，如用户在浏览推荐岗位时， 可滑动查看不同岗位，并选择投递或标记不感兴趣。

本示例基于Stack组件实现岗位卡片的层叠布局，PanGesture实现滑动查看岗位的功能，animateTo实现滑动或删除卡片的动画效果。

实现思路

• 采用Stack布局，为每个岗位卡片设置不同的尺寸、偏移量、透明度和zIndex等参数。
  1. Stack({ alignContent: Alignment.Start }) {
  2. ForEach(this.arr, (item: card, index: number) => {
  3. Column() {
  4. Image(item.img)
  5. .objectFit(ImageFit.Contain)
  6. .width(this.cardWidth * item.size)
  7. .height(569 * item.size)
  8. }
  9. .zIndex(item.zIndex)
  10. .opacity(item.opacity)
  11. .offset({
  12. x: item.offsetX,
  13. y: item.offsetY
  14. })
  15. })
  16. }
• 滑动岗位或删除岗位时，在animateTo中改变卡片参数实现动画效果。
  1. handleSlider() {
  2. animateTo({
  3. duration: 500,
  4. curve: Curve.EaseInOut,
  5. iterations: 1,
  6. playMode: PlayModeNormal,
  7. }, () => {
  8. // Update the parameters of the job card
  9. })
  10. }

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──constants
3. │ │ └──StyleConstants.ets // 常量
4. │ ├──entryability
5. │ │ └──EntryAbility.ets
6. │ ├──entrybackupability
7. │ │ └──EntryBackupAbility.ets
8. │ └──pages
9. │ └──PositionSlidingPage.ets // 岗位滑动页
10. └──entry/src/main/resources // 应用资源目录

参考文档

Stack

PanGesture

animateTo

代码下载

推荐岗位-层叠卡片滑动切换动效示例代码