巧用weui.gallery()，點擊圖片后預覽圖片

要在頁面需要加載的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('');
})