巧用weui.gallery()，点击图片后预览图片

时间：2021-11-12 16:12:50

要在页面需要加载的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();

})

巧用weui.gallery()，点击图片后预览图片巧用weui.gallery()，点击图片后预览图片

如果你认为此时，预览图片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('');

})
 

相关文章