鸿蒙基于开源项目photoSwipe—如何实现点击预览图片放大缩小特效、图片轮播功能

本项目是基于开源项目photoSwipe进行鸿蒙JS API的功能化移植和开发的，在功能实现上属于功能重写。

项目介绍

• 项目名称：PhotoSwipeJs_ohos（相册画廊组件）
  • 所属系列：鸿蒙的第三方组件适配移植
  • 功能：实现点击预览图片放大缩小特效、手指滑动，其他功能有标题栏等
  • 项目移植状态：100%，已完成核心功能移植
  • 调用差异：功能重构
  • 编程语言：Js
  • 外部库依赖：无
  • 开发版本：sdk7（版本向下兼容），DevEco Studio3.0 beta1

由于本项目基于JS版本移植开发，在开发中并未借鉴原开源项目photoSwipe的代码，只参照该功能，基于方舟开发框架ArkUI实现类似功能，需要注意的是，该版本为HarmonyOS适配版本。

项目预览

整体封面

点击图片放大与点击任务栏放大效果

点击滑动与手势滑动效果

图片详情介绍

整体操作动图

使用教程

1.组件的实现位于 entry/src/main/js/default/common/components/ 中，将组件复制至自己的项目中即可调用这些组件。下面我们以 imagePreview为例演示组件的调用方法，其它组件同理。

2.在 hml 文件中添加 imagePreview并绑定组件所需参数。

<element name="photoswiper" src="../../common/component/imagePreview/preview.hml"></element>
<!--测试代码-->
<photoswiper  @handle-result="onResReceived" image-list="{{imgList}}"></photoswiper>

image-list 指定了图片的 url、图片详情信息，自定义事件 handle-result 将验证结果返回给父组件。

3.在 js 文件中定义组件参数和事件处理函数。主要涉及三个步骤：

• 指定图片源

  对于画廊组件PhotoSwipeJs_ohos我们需要指定图片源数组。此处我们选择本地资源图片的 url，使用 url 字符串组成的数组初始化 imglist，另外选择添加标题txt、介绍text。

• 指定组件参数

  对于画廊组件，参数对象具有如下属性：

  • PhotoSwipeJs_ohos

  参数名	解释
  txt	照片标题
  text	照片详情
  image	照片url地址

  • 指定事件处理函数

  在绑定事件处理函数后，在父组件中可以通过 e.detail.result 获取子组件的验证结果。

js 具体代码如下：

import prompt from '@system.prompt';

export default {
    data: {
        title: "",
        // 可以增加数据行，包括图片与图片介绍
        // txt--标题 text--介绍 image--图片地址
        imgList:[
            {
                txt: '元气森林',
                text: '川涘将钓玉,乡亭期散金。 素晖射流濑,翠色绵森林。',
                image: '/common/images/test1.jpg'
            },
            {
                txt: '小岛极光',
                text: '马沙少个天灯塔,暗雨乌风看作标。',
                image: '/common/images/test2.jpg'
            },
            {
                txt: '腊雪寒冬',
                text: '凌兢侵腊雪，散漫入春诗。赠我岁寒色，怜君冰玉姿。',
                image: '/common/images/test3.jpg'
            }
        ],
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    // 事件处理函数，在此处定义验证完成后的操作
    onResReceived(e) {
        prompt.showToast({
            message: "父组件得到结果:" + e.detail.result
        });
    }
}

版本迭代

• v0.1.0-alpha

版权和许可信息

• PhotoSwipeJs_ohos经过Apache License, version 2.0授权许可。

最后

如果你想快速提升鸿蒙技术，那么可以直接领取这份包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）

1.鸿蒙核心技术学习路线

2.大厂面试必问面试题

3.鸿蒙南向开发技术

 4.鸿蒙APP开发必备

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击→鸿蒙Next全套VIP学习资料免费领取（安全链接，放心点击）