谁还用jQuery WEUI呢？——我用了weui的图片浏览器

前言

最近写了一个移动端小项目，没有用vue/react框架，使用的jQuery，有些功能的实现不想自己写。用的weui jQuery版本的，好像很久都没有维护了。之前还用过layUI，也已经不能用了。

weui官网

https://jqweui.edik.cn/

需求

页面有多个图片，小图排列好。

点击某一张图片可以大图预览该图，可以左右滑动。

实现

• 引入文件（除了引用weui.js、weui.css之外，需要引用swiper.js）,也可从官网下载文件到本地引入使用。

<!-- head 中 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>

• 使用weui-拓展组件中的图片浏览器

var pb1 = $.photoBrowser({
  items: [
    "./images/swiper-1.jpg",
    "./images/swiper-2.jpg",
    "./images/swiper-3.jpg"
  ]
});
pb.open();  //打开
pb.close(); //关闭

这时已经可以实现打开图片浏览器了，但是希望点击图片的时候再展示浏览器，需要给img标签添加点击事件，记住当前的index，然后调用.open方法。

pb.open(index)

• 滑动动画问题

这样有个问题，比如当前几最后一张图时，会从上次打开的图滑动到最后一张图，有个这样的动画效果，不是符合预期的。所以要把这个动画效果去掉。

官网没有写出这个配置项，看了swiper.js的源码，里面有一个duration: 200, // 默认动画时间，如果没有在调用函数的时候指定，则使用这个值。我们可以修改这个时间。duration：0。

放上其他的配置项

 {
    items: [],
    autoOpen: false, //初始化完成之后立刻打开
    onOpen: undefined,
    onClose: undefined,
    initIndex: 0, //打开时默认显示第几张
    maxScale: 3,
    onSlideChange: undefined,
    duration: 200, // 默认动画时间，如果没有在调用函数的时候指定，则使用这个值
    tpl: '<div class="weui-photo-browser-modal">\
            <div class="swiper-container">\
              <div class="swiper-wrapper">\
                {{#items}}\
                <div class="swiper-slide">\
                  <div class="photo-container">\
                    <img src="{{image}}" />\
                  </div>\
                </div>\
                {{/items}}\
              </div>\
              <div class="caption">\
                {{#items}}\
                <div class="caption-item caption-item-{{@index}}">{{caption}}</div>\
                {{/items}}\
              </div>\
              <div class="swiper-pagination swiper-pagination-bullets">\
                {{#items}}\
                <span class="swiper-pagination-bullet"></span>\
                {{/items}}\
              </div>\
            </div>\
          </div>'
  }

• 完整示例

 let html = ''
 let index=-1
 if(data.length>0){
    data.map((item) => {
        let imgHtml = ''
        item.images.map((img) => {
            index++
            imgList.push(imgSrc)
            imgHtml += `<img class="news-img" src="${img.image}" onclick="openImg(${index})">`
        })
        html += ` <div class="news-box">
        <p class="news-time">${formatTime(item.add_time)}</p>
        <div class="news-content">${item.content}</div>
        <div class="news-imgs">
        ${imgHtml}
        </div>
      </div>`
    })
    $("#newsList").html(html);
}else{
    $("#newsList").html(`<div class="weui-loadmore weui-loadmore_line">
    <span class="weui-loadmore__tips">暂无数据</span>
  </div>`)
}
 function openImg(openIndex) {
    pb1 = $.photoBrowser({
        items: imgList,
        duration:0,
        initIndex:openIndex
      });
    pb1.open();  //打开
}