Trust
Trust
  • 发布:2017-12-08 19:24
  • 更新:2019-03-13 13:47
  • 阅读:12397

【示例】原生版本图片预览使用教程

分类:HTML5+

mui内置有H5版本的图片预览插件,教程参考mui文档
原生图片预览,可以解决当前窗口中使用了原生标题栏等原生组件时,H5版图片预览无法全屏的情况。
相比MUI提供的H5模式,具有更优的体验和性能。先看最终效果:

简单实现

使用5+runtime提供的原生图片预览,详细参考plus.nativeUI.previewImage相关文档。

HTML部分

<div class="mui-content-padded">  
  <img src="../images/yuantiao.jpg" />  
  <img src="../images/muwu.jpg" />  
  <img src="../images/shuijiao.jpg" />  
</div>

JavaScript部分

具体实现中,图片地址列表可以在图片信息渲染结束后,就立刻读取;点击某个图片时,只需要查找当前图片在列表中的位置即可。

mui.plusReady(function() {  
  // 获取图片地址列表  
  var images = document.querySelectorAll('.mui-content-padded img');  
  var urls = [];  
  for(var i = 0; i < images.length; i++) {  
    urls.push(images[i].src);  
  }  
  // 监听图片的点击  
  mui('body').on('tap', 'img', function() {  
    // 查询图片在列表中的位置  
    // 由于dom节点列表是伪数组,需要处理一下  
    var index = [].slice.call(images).indexOf(this);  
    plus.nativeUI.previewImage(urls, {  
      current: index,  
      loop: true,  
      indicator: 'number'  
    });  
  });  
});

注意:实际开发中,如果列表信息会动态加载,则每次加载完成后需要更新图片地址列表。

Hello mui中体验

最新版的Hello mui已集成了原生图片预览的示例,在即将发版的HBuilder 8.9 版本中即可体验,体验路径:
访问 http://www.dcloud.io/ 下载最新版HBuilder,新建Hello mui项目,Hello mui首页--> image viewer(图片预览) --> 图片预览(native模式)

6 关注 分享
Neil_HL lhyh 五叶神 21024338@qq.com 909178457@qq.com wz_jxnu@163.com

要回复文章请先登录注册

mmt

mmt

test
2019-03-13 13:47
霸王

霸王

GIF动图用这个方法放大后不动了....
2019-03-13 11:41
小权

小权

回复 小权:
直接使用hello mui对应的页面测试,将图片地址换成网络地址,图片比较大一点。并且是等待加载完,才点击预览。结果第一张打开滑动一下,就会卡住,然后闪退。请官方及时修复。
2017-12-25 21:13
小权

小权

经多次测试,iPhone上,网络图片大约超过4M大小时,使用原生预览,应用必定会卡死闪退
2017-12-25 21:08
小权

小权

IOS下,一个页面有多处不同结构的图片组(比如微博内容的图片为一组,某个评论的图片为一组),点击某个组下的图片,调用这个原生预览一滑动必闪退。
完全一样的代码在安卓中没问题。
不知道是哪里的问题?
另外插一句,这个帖子,为什么我按标题怎么都搜不到,非得在HBuilder里的更新日志里复制地址打开。。
2017-12-25 20:31
jkinsjz@126.com

jkinsjz@126.com

连接真机调试的时候可以用,云端打包以后就不行了,两种情况下plus.runtime.innerVersion都是1.9.9.39993,hbuild是最新版
2017-12-23 15:40
风灯

风灯

如果图片比较大的话,反而会变得模糊
2017-12-20 20:29
446776231@qq.com

446776231@qq.com

回复 Trust:
ios离线版本的sdk是11月30的?打完包后没反应啊
2017-12-13 11:46
有点晕

有点晕

调用previewImage.js后,<a>标签里的href属性失效,怎么解决啊!
2017-12-13 11:46
446776231@qq.com

446776231@qq.com

回复 Trust:
点击预览图片加载时能显示一个转的圆圈么?
2017-12-13 09:56