# PhotoSwipeJs_ohos

**Repository Path**: isrc_ohos/PhotoSwipeJs_ohos

## Basic Information

- **Project Name**: PhotoSwipeJs_ohos
- **Description**: 鸿蒙相册画廊组件，可以进行图片放大缩小、图片轮播
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-03-30
- **Last Updated**: 2023-01-04

## Categories & Tags

**Categories**: harmonyos-image

**Tags**: None

## README

# PhotoSwipeJs_ohos



**本项目是基于开源项目photoSwipe进行鸿蒙JS API的功能化移植和开发的，在功能实现上属于功能重写。可以通过项目标签以及github地址（https://github.com/dimsemenov/PhotoSwipe/tree/master/dist）追踪到原JS项目版本。**

####  项目介绍

- 项目名称：PhotoSwipeJs_ohos（相册画廊组件）
- 所属系列：鸿蒙的第三方组件适配移植
- 功能：实现点击预览图片放大缩小特效、手指滑动，其他功能有标题栏等
- 项目移植状态：100%，已完成核心功能移植
- 调用差异：功能重构
- 编程语言：Js
- 外部库依赖：无
- 开发版本：sdk7（版本向下兼容），DevEco Studio3.0 beta1
- 项目发起作者：蔡志杰
- 邮箱：[isrc_hm@iscas.ac.cn](mailto:isrc_hm@iscas.ac.cn)
- 原项目Doc地址：[https://github.com/dimsemenov/PhotoSwipe/tree/master/dist]

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

#### 项目预览

整体封面

![封面](https://gitee.com/isrc_ohos/PhotoSwipeJs_ohos/raw/master/readme_image/1.png)

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

![点击放大](https://gitee.com/isrc_ohos/PhotoSwipeJs_ohos/raw/master/readme_image/2.png)

点击滑动与手势滑动效果

![滑动](https://gitee.com/isrc_ohos/PhotoSwipeJs_ohos/raw/master/readme_image/3.png)

图片详情介绍

![介绍](https://gitee.com/isrc_ohos/PhotoSwipeJs_ohos/raw/master/readme_image/4.png)

整体操作动图

![整体操作动图](https://gitee.com/isrc_ohos/PhotoSwipeJs_ohos/raw/master/readme_image/5.gif)

#### 使用教程

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](https://gitee.com/link?target=http%3A%2F%2Fwww.apache.org%2Flicenses%2FLICENSE-2.0)授权许可。