巧用weui.gallery(),點擊圖片後預覽圖片
阿新 • • 發佈:2017-09-26
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(),點擊圖片後預覽圖片