要在页面需要加载的JS文件:
<script src="../js/libs/weui.min.js"></script>
可以去weui的文档中下载,这是它的demo: https://weui.io/weui.js/
要先给图片创建一个节点:
var imgDom = $("<img class=‘weui-jiaj-img‘ />");
因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的class
for(var i = 0; i < data.length; i++){ imgDom.addClass(‘img-‘ + i); ..... }
给每个节点的src属性添加获致到的img地址
imgDom.attr(‘src‘, problem_img);
最后把这个节点添加到页面的某个div下面
seePanel.find(‘.answer-img‘).append(imgDom);
点击图片时,需要先找到这个图片的节点,使用weui.gallery(img地址),弹出图片并预览
var imgDiv = seePanel.find(‘.answer-img‘); imgDiv.find(‘.img-‘ + i).on(‘click‘,function(){ weui.gallery(problem_img); $(‘.weui-gallery__del‘).remove(); })
如果你认为此时,预览图片OK的话,就太早了,
weui.gallery(imgUrl); weui.gallery()方法在预览图片时,会把当前imgUrl地址写入span内部,必须要清除span内部的这个url才算完。最后应该要加上这句:
//点击图片预览这是我写的,这个不要动 $(‘.js_container‘).on(‘click‘,‘.weui-jiaj-doctor-img‘,function(){ //取item属性出来 var item = $(this).attr(‘img-item‘); if(item) item = JSON.parse(item); var imgUrl = item.imgUrl; weui.gallery(imgUrl); $(‘.weui-gallery__del‘).remove(); //去掉span中的字符串,要加上这句 $(‘.weui-gallery span‘).html(‘‘); })
时间: 2024-10-14 00:02:43