对应组件地址：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; }

刚刚试了一下，两个问题都有了解决方案，写在这里吧，或许有人用得上：

1.图片弹出置顶

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

2.防止图片过长

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