关于移动端图片浏览，previewimage的使用
Posted xiaoyeya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于移动端图片浏览，previewimage的使用相关的知识，希望对你有一定的参考价值。
我相信在移动端项目中，大家都会遇到图片浏览的问题，像qq，微信，微博，淘宝，当你点击图片时，图片会放大全屏显示，双击图片时图片继续放大查看，双指左右滑动也可以放大，当你再次点击时图片，图片恢复原始大小，并且图片可以左右滑动切换，
今天给大家讲讲我在项目中如何实现这个功能的。
首先我们将要用到previewimage.js,mui.zoom,js和mui.js或者mui.min.js,还有一个previewimage.css样式。下面直接看代码，注释也很详细。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" type="text/css" href="css/mui.min.css"/> <link rel="stylesheet" type="text/css" href="css/mui.previewimage.css"/> </head> <body> <!-- html结构 --> <div class="mui-content"> <p>这是第一张图</p> <p> <img src="img/1.png" data-preview-src="" data-preview-group="1" /> </p> <p>这是第二张图</p> <p> <img src="img/2.jpg" data-preview-src="" data-preview-group="1" /> </p> <p>这是第三张图</p> <p> <img src="img/3.jpg" data-preview-src="" data-preview-group="1" /> </p> </div> <!--引入所需要的插件--> <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script> <script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 初始化previewImage mui.previewImage(); </script> </body> </html>
结构，引入样式，相关js插件，初始化不用多说，注意到的是在img标签内的其他两个属性data-preview-src="" 和 data-preview-group="1"
这两个属性是必填的，data-preview-src为点击放大时预览图片的链接，默认可为空，为空时则是当前图片的链接；data-preview-group将图片声明为同一组预览图。当data-preview-group里面的值为同一组时浏览图片时左右滑动即可查看同一组图片，一般情况下都将data-preview-group的值设置为1，即data-preview-group="1"。然后你就可以打开查看效果了。
当然，这只是最简单的需求，如果需要在浏览图片长按弹窗头部显示其他内容的话，还需要在previeimages.js里面修改源代码。
以上是关于关于移动端图片浏览，previewimage的使用的主要内容，如果未能解决你的问题，请参考以下文章
微信原生小程序中富文本组件(rich-text)如何实现图片预览(wx.previewImage)？
关于微信JS SDK接口wx.previewImage预览接口的使用