mui.previewimage.js APP图片查看器插件

    mui不得不说，是一款非常强大的接近原生APP体验的高性能前端框架，而且入门很简单，提供了很多接近原生app的插件，例如datepicker等。今天，就来介绍下图片查看器插件mui.previewimage.js，它的效果简单说明下：即点击缩略图，全屏显示大图（大图显示前会有加载动画），并且支持左右滑动切换上一张下一张，也就是分组功能，长按图片可以下载，双击或手指上下左右拖拽放大等，几乎和Android和IOS图片查看器差不多。效果图如下：

1、在head引入css文件：

<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<link href="css/previewimage.css" rel="stylesheet">

2、将图片按照下面格式来，其中，data-preview-src为大图地址，data-preview-group为分组，一组图片请用同一个数字表示，src为缩略图地址

<img data-preview-src="b.jpg" data-preview-group="1" src="s.jpg">

3、引入js

<script src="js/mui.min.js"></script>
<script src="js/mui.zoom.js"></script>
<script src="js/mui.previewimage.js"></script>

4、初始化js，建议放在mui.plusready()里面：

mui.previewImage();

注意： 只有在使用hbuilder新建移动app项目时，选择Hello H5+模板，才能找到previewimage.css 和 mui.previewimage.js，如下图：