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

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模式）