[HarmonyOS Next示例代码]多图片合集

HarmonyOS next 示例代码全集

多图片合集

介绍

基于Swiper组件和自界说指示器实现多图片合计功能。
在短视频平台上，经常可以见到多图片合集。它的特点是：由多张图片组成一个合集，图片可以自动进行轮播，也可以手动去进行图片切换。图片下方的进度条 会跟随图片的切换而切换。
多图片合集展示结果是一个常见的UI结果：

• 当作品自动播放时，图片可自动切换，下方进度条迟钝增长，且进度与该图片停留时间匹配。
  
• 当作品手动播放时，下方进度条会根据图片切换改变为未完成进度状态或已完成进度状态。
  

预览结果

工程目次

1. ├──entry/src/main/ets                                   // 代码区
2. │  ├──common
3. │  │  └──CommonConstants.ets                            // 常量
4. │  ├──entryability
5. │  │  └──EntryAbility.ets                               // 程序入口类
6. │  ├──entrybackupability
7. │  │  └──EntryBackupAbility.ets
8. │  ├──pages                              
9. │  │  └──Index.ets                                      // 多图片合集页
10. │  └──utils.ets
11. │     └──DataSource.ets                                 // 图片数据资源类
12. └──entry/src/main/resources                             // 应用资源目录

复制代码

利用说明

运行应用后，不滑动屏幕时，图片自动轮播，且下方进度条迟钝增长至已完成状态，播放完成时，会继承循环播放。
滑动屏幕时，图片跟随滑动方向而进行切换，此时会关闭自动轮播和循环播放的结果，且下方进度条刹时增长至已完成状态。
实现说明

上面图片的轮播部分利用Swiper组件实现。
下面的指示器，必要关闭原生指示器，自界说指示器（进度条）来实现。
进度条可以利用Row容器来实现对应的结果，通过层叠布局方式将Row容器叠放在一起。进度条迟钝增长，可以通过animation属性来设置对应的动画结果。进度条的完成态和未完成态的实现， 只必要设置对应的背景颜色即可。
相干权限

无
束缚与限定

• 本示例仅支持标准系统上运行，支持装备：华为手机。
  
• HarmonyOS系统：HarmonyOS NEXT Developer Beta5及以上。
  
• DevEco Studio版本：DevEco Studio NEXT Developer Beta5及以上。
  
• HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta5 SDK及以上。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。