更新记录

1.0.2(2020-08-09)

用数字标识的时候,打开第一张图的时候有问题。

1.0.1(2020-07-31)

处理长按事件和缩放事件冲突的问题。

查看更多

previewImage

介绍

在使用uni-app框架的时候,需要用到图片预览功能,框架提供了相应的uni.previewImage方法。 但是在某些特殊情况下该方法无法满足需求,如:

  • 需要对预览界面进行更多样式上的调整时。
  • 需要当前页面不被隐藏时。

例如

  1. 我们需要显示图片的描述信息。
  2. 我们要做的一个在线学习功能,当用户离开学习页面就要停止计时。 当用户点击图片预览查看时,也算做正常计时。

在调用uni的预览方法会新开一个页面,导致当前页面被隐藏,触发onHide事件。 从而影响到了onHide事件的处理业务。 我查阅了uni.previewImage方法参数,没有找到可以指定使用非原生预览的设置方式。 才决定自定义一个图片预览。

整个插件的内容很少,只要稍作整理,大家都能自己写一个。 我这边把代码贡献出来,希望给大家争取点耍朋友的时间。

此插件的特性

  • 多端支持
  • 手势缩放
  • 描述文字
  • 长按事件

注意

  • 此插件的流畅程度赶不上官方的uni.previewImage方法。
  • 缩放时默认从中心放大,手指移动图片时又可能会出发切换事件,整体体验一般。
  • 官方的方法实在不能满足需求了,再考虑使用此类插件。

目录结构

  • components 插件目录
    • previewImage 图片预览插件
      • previewImage.vue
  • pages 页面目录
    • index 首页
      • index.vue 包含插件的使用示例
    • style 样式
      • style.vue 可在此页面定制样式
  • static 静态资源
    • a/b/c/d.jpg 调试用的图片

使用方法

详见pages/index/index.vue文件。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问