jquery weui 圖片瀏覽器Photo Browser

 

jquery weui 圖片瀏覽器Photo Browser 如何使用？

 

對應組件地址：http://jqweui.com/extends#swiper

 

先說說業務場景：類似朋友圈這樣的布局效果，點擊小圖可以瀏覽大圖，並支持大圖左右切換，效果圖如下（加了滾動加載更多的操作在里面）：

 

 

重點說明：該引入的js和swiper.js 都需要引入進去

<script src="../../res/js/jquery-2.1.4.js"></script>
<script src="../../res/js/jquery-weui.js"></script>
<script src="../../res/js/swiper.js"></script>

 

 

圖片綁定的調用函數：用了es6的模板字符串的語法，很強大的``;

html += `<img class="list-img" onclick="showBigImg('${posterList.pictures}',${k})"  src="${strImg}" style="height: 80px;">`;

 

 

下面進入主題：

function showBigImg(list,index) { imgList = list.split(',');//list是一個圖片url的字符串，以‘，’分隔的，這里把它轉換成數組對象 console.log('array',Array.isArray(imgList)); //$.photoBrowser({items: imgList}).open(1);
    //pb1.items = imgList;
    //pb1.open();
 $.photoBrowser({  items: imgList, //賦值 initIndex: index, //當前點擊的圖片下標 onSlideChange: function(index) { console.log(this, index); }, onOpen: function() { console.log("onOpen", this); }, onClose: function() { console.log("onClose", this); }  }).open();//這里一定要這樣調用一下 }

 

方案二：這樣調用也是ok

function showBigImg(list,index) { imgList = list.split(','); console.log('array',Array.isArray(imgList)); $.photoBrowser({items: imgList}).open(index);
    }

 

遇到的問題：

如果是小圖會出現下面的效果：

 

解決方案：解決方案的來源：https://github.com/lihongxun945/jquery-weui/issues/169

 .weui-photo-browser-modal .photo-container { justify-content: center; }

 

 

 

 

 

 

補充說明：

來自作者：Implementsrt  

 

剛剛試了一下，兩個問題都有了解決方案，寫在這里吧，或許有人用得上：

1.圖片彈出置頂

onOpen:function(){$(this.modal).css('z-index',6666); }

 

2.防止圖片過長

.weui-photo-browser-modal .photo-container img {
    max-height: 100%;
}