移動端圖片瀏覽器輪子

緣起

身爲一名前端渣，日常輪子用的飛起，不到萬不得已，毫不本身寫代碼！慢慢的，成爲了一名熟練的輪子組裝師傅。但在不久前，須要在移動端展現一些圖片，產（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

下一步計劃

• 導出更多配置項，高度定製化
• 快速滑動手勢支持