Viewer.js图片预览插件

针对H5内嵌app，app没有图片预览方法的情况下使用！

以下是Ts版本基础使用的方法：

Viewer.js使用方法

第一步

cnpm i viewerjs

第二步

引入包、样式

import Viewer from "viewerjs";
import "../../../../node_modules/viewerjs/dist/viewer.min.css";

第三步

基础的html

<div id="imgPage">
  	//关闭按钮
	<div class="img_close_btn">
		<img class="width-img" src="./images/close.png" alt="">
	</div>
  	//图片列表
	<ul id="imgView">
	</ul>
</div>

第四步

css

#imgPage {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
    background-color: #fff;

    .img_close_btn {
        position: absolute;
        left: 0.5rem;
        top: 0.5rem;
        width: 0.99rem;
        z-index: 9999 !important;
    }

    #imgView {
        background-color: white;

        img {
            opacity: 0;
        }
    }
}

第五步

初始化方法

initViewer() {
	let _this = this;
	this.viewer = new Viewer($("#imgView")[0], {
		viewed() {
			// _this.viewer.zoomTo(1);
		},
	});
}

第六步

使用方法

imgFuns(data: any, isOne: any = false) {
    let liHtml = ``;
    if (!isOne) {
        for (let i = 0; i < data.length; i++) {
            liHtml += `
                <li><img data-original="${data[i].src}" src="${data[i].src}" alt=""></li>
            `;
        }
    } else {
        liHtml += `
            <li><img data-original="${data}" src="${data}" alt=""></li>
        `;
    }

    $("#imgView").html(liHtml);
    if (!this.viewer) {
        this.initViewer();
    } else {
        this.viewer.destroy();
        this.viewer = null;

        this.initViewer();
    }
    $("#imgPage").show();
}

后记

相关博客：www.cnblogs.com/Jimc/p/1013…

作者github：github.com/fengyuanche…