1. 程式人生 > >巧用weui.gallery(),點擊圖片後預覽圖片

巧用weui.gallery(),點擊圖片後預覽圖片

image .html 一個 ans 如果 attr 分享 data 字符

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

 

巧用weui.gallery(),點擊圖片後預覽圖片