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%;
}