API

【代码分享】H5里实现微信点击图片全屏预览预览效果,可双指缩放图片

先预览一下看效果:

sss.png

 
https://e.u.mgd5.com/c/ams9/uni0/index.html
 

 
下边的是内容里需要添加的代码
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
window.checkuseragent = function(){
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
return false;
}else{
return true;
}
}

var picArr = ;
window.getimgurl = function(){
var max = 5; //这里的数字是需要按你自己图片的数量修改的
var j;
var picdom;
for (i = 0; i < max; i++) {
j = i+1;
picdom = scene.getObjectByName('pic'+j).dom;
picArr.push(picdom.src);
}
}

window.customview = function(){
if(checkuseragent()){
wx.previewImage({
current: picArr[0],
urls: picArr
});
}

}

});

需要注意的:
1.把需要用户点击的元素放在舞台中,并上添加点击时执行回调函数customview,其他图片需要上传到素材库后再放到舞台外,图片命名规则是pic1,pic2,pic3,pic4等,本例子中是把pic1设置成需要用户点击的物体了
2.图片加载需要时间,所以最好使用一个定时器来初始化预览效果,定时器加回调函数getimgurl,等待定时器结束时执行回调
3.这个效果只在微信里生效,其他地方无效
4.如果你的图片数量不是5,那么需要在代码里把 var max = 5; 这里的数字修改成你图片的数量
 
 
在以下公众号回复“全屏预览图片”,获取本文的源文件链接
 

扫码.png

 
 

7 个评论

图片旋转呢?
旋转图片的功能已经在 beta.mugeda.com 上线了,点中图片,在属性里设置自由拖动的地方可以设置双指放和旋转
点击全屏预览图片,双指缩放图片效果 单张可以做到吗?大神也给写一下 万分感谢 谢谢!
预览完之后退到H5里面 无法翻页继续看了是什么原因?
用了后就不能滑动之类的功能了,等于没用。
要能滑动就要将for循环取消,然后自己重复一下,我也不知道为什么可行。
为什么我添加了没效果啊,复制过去还提示报错

要回复文章请先登录注册