移动端图片浏览器轮子

缘起

身为一名前端渣，平常轮子用的飞起，不到万不得已，绝不自己写代码！慢慢的，成为了一名熟练的轮子组装师傅。但在不久前，需要在移动端展示一些图片，产（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 onerror
    onViewerHideListener = ()=>{}, // listener for viewer hide
    restDoms = [], // config some addition dom elements
    imgMoveFactor = 2, // movement speed (imgMoveFactor * translateX or translateY)
    imgMinScale = 1, // minimum scale of the image
    imgMaxScale = 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 listener
    onViewerHideListener = ()=>{},
    restDoms = [],
    pageThreshold = 0.1, // threshold of go to next or prev page (window.innerWidth * pageThreshold)
    pageDampingFactor = 0.9, // damping factor
    imgMoveFactor = 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

下一步计划

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

转载于:https://juejin.im/post/5d4c32e75188255b3e412ad7