缘起

身为一名前端渣，平常轮子用的飞起，不到万不得已，绝不自己写代码！慢慢的，成为了一名熟练的轮子组装师傅。但在不久前，需要在移动端展示一些图片，产（niu）品（pi）经（da）理（wang）说：跟微信图片浏览效果差不多就可以！于是颤抖着双手在github那一通找啊，居然没发现一个好用的！顿时心情有点复杂。没办法啊，为了混口饭吃，只有先用个现成轮子摸一下鱼咯。自己业余时间慢慢搞一个呗，于是便有了这个完成度还可以的轮子h5-imageviewer

一些已实现的功能

• 常用的手势，比如捏、旋转、双击放大缩小和swipe等
• 滑动和swipe换页
• 横竖屏及平滑切换
• 纯dom实现，适用于React/Vue/Angular
• 支持长图浏览

先举个栗子（扫码在线体验）

竖屏视频
横屏视频
单张图片模式

安装

直接通过npm安装即可

npm install h5-imageviewer
复制代码

如何使用

单张图片模式（手势更多哦）

import viewer from 'h5-imageviewer'
viewer.showViewer(imgUrl, // image url (base64 also support){altImg, // placeholder when image onerroronViewerHideListener = ()=>{}, // listener for viewer hiderestDoms = [], // config some addition dom elementsimgMoveFactor = 2, // movement speed (imgMoveFactor * translateX or translateY)imgMinScale = 1, // minimum scale of the imageimgMaxScale = 2, // maximum scale of the image}
)
// hide image viewer
viewer.hideImgViewer()
复制代码

多图片分页模式（为了简单方便，支持长图）

import viewer from 'h5-imageviewer'
viewer.showImgListViewer(imgList, // image url list (base64 also support){defaultPageIndex = 0, // the default page index (start with 0)altImg,onPageChanged = pageIndex=>{}, // page changed listeneronViewerHideListener = ()=>{},restDoms = [],pageThreshold = 0.1, // threshold of go to next or prev page (window.innerWidth * pageThreshold)pageDampingFactor = 0.9, // damping factorimgMoveFactor = 2,imgMinScale = 1,imgMaxScale = 2,limit = 11, // how many pages will be kept offscreen in an idle state}
)
// hide image list viewer
viewer.hideImgListViewer()
复制代码

更多使用详情，请参照 EXAMPLE

第三方依赖（香）

• AlloyFinger

下一步计划

• 导出更多配置项，高度定制化
• 快速滑动手势支持