jquery weui 图片浏览器Photo Browser

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.图片d出置顶

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

2.防止图片过长

.weui-photo-browser-modal .photo-container img {

    max-height: 100%;

}