移动端图片浏览器轮子

拼搏现实的明天。 2024-04-17 06:30 68阅读 0赞

# 缘起 #

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

# 一些已实现的功能 #

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

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

[竖屏视频][Link 1]  
[横屏视频][Link 2]  
[单张图片模式][Link 3]

# 安装 #

直接通过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

[h5-imageviewer]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FTUBB%2Fh5-imageviewer
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Ftubb.github.io%2Fh5-imageviewer%2F1564584324582171.mp4
[Link 2]: https://link.juejin.im?target=http%3A%2F%2Ftubb.github.io%2Fh5-imageviewer%2F1564587116005125.mp4
[Link 3]: https://link.juejin.im?target=http%3A%2F%2Ftubb.github.io%2Fh5-imageviewer%2F1564587977275048.mp4
[EXAMPLE]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FTUBB%2Fh5-imageviewer%2Fblob%2Fmaster%2Fsrc%2Fexample%2Fexample.js
[AlloyFinger]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FAlloyTeam%2FAlloyFinger