H5+ 跨平台APP - 原生图片预览

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/QQ_Empire/article/details/100532374

核心函数 plus.nativeUI.previewImage(urls,options)

参数：

urls: ( Array[ String ] ) 必选 需要预览的图片地址列表
支持网络地址，也支持本地地址。 相对路径 - 相对于当前页面的host位置，如"a.jpg"； 绝对路径 - 系统绝对路径，如Android平台"/sdcard/a.jpg"，此类路径通常通过其它5+ API获取的； 扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。

options: ( PreviewImageOptions ) 可选 预览的显示参数
如设置默认显示图片的索引值。

---

vue案例

urls为图片完整路径集合

<img v-for="(data,index) in urls" :src="data" alt="" @click="clickImg(index,urls)">



 // methods方法

clickImg(index,urls){
    
    plus.nativeUI.previewImage(urls, {
        current: index,
        loop: true,
        indicator: 'number'
    });
},

---

原生案例

<div>
 <img src="img/imglist/1.jpg" class="imgs" />
 <img src="img/imglist/2.jpg" class="imgs" />
 <img src="img/imglist/3.jpg" class="imgs" />
 <img src="img/imglist/4.jpg" class="imgs" />
</div>
<script type="text/javascript">
var imgs = document.querySelectorAll('.imgs')
var urls = [];
for(var i = 0; i < imgs.length; i++){
 urls.push(imgs[i].getAttribute('src'));
 imgs[i].addEventListener('click', function(){
  var index = [].slice.call(imgs).indexOf(this);
  plus.nativeUI.previewImage(urls, {
   current: index,
   loop: true,
   indicator: 'number'
     });
 });
}
</script>

---

效果图