小程序自定義圖片預覽和多圖下載的實現

小程序開發中圖片列表的需求再常見不過了，一般都會配合大圖預覽和圖片下載的功能

可是微信又沒有提供可自定義的圖片預覽功能，有時候會有需求在預覽大圖的時候收藏或者下載啥的用 wx.previewImage 就不太合適了

下面提供了一個 照片牆實現自定義圖片預覽和多圖下載 的實現方式，有相似需求的同窗能夠嘗試一下

有問題也歡迎提出 GITHUB

mp-photo-album

小程序照片牆/自定義大圖預覽/多圖下載

使用

安裝

npm install --save --production mp-photo-album

引入

{
  "usingComponents": {
    "mp-photo-album": "/miniprogram_npm/mp-photo-album/index"
  }
}

功能

1. 照片列表/滾動加載

2. 大圖預覽/手勢縮放/下載/自定義操做

wxml

<comp list="{{list}}" bindlike="like" bindclose="finish" likeTitle="收藏"></comp>

圖片列表數據結構

[{
  src: 'https://raw.githubusercontent.com/panmenglin/mp-photo-album/transform/common/images/Desert1.jpg', // 原圖
  previewSrc: 'https://raw.githubusercontent.com/panmenglin/mp-photo-album/transform/common/images/Desert1_1280.jpg', // 預覽大圖
  listSrc: 'https://raw.githubusercontent.com/panmenglin/mp-photo-album/transform/common/images/Desert1_200.jpg', // 列表小圖
  desc: '圖片描述', // 圖片描述
  check: false // 是否選中
}]

配置

likeTitle

自定義按鈕文字

bindlike

自定義按鈕事件

bindclose

關閉預覽回調

3. 多選保存到相冊

選擇多圖，點擊下載保存到相冊，最多同時9張

wxml

<comp list="{{list}}" option="{{option}}" bindfinish="finish"></comp>

<view wx:if="{{option !== 'download'}}" bindtap="select">選擇</view>
<view wx:if="{{option === 'download'}}" bindtap="finish">完成</view>

配置

option [默認] normal

用來切換操做方式

切換爲 download 時，則能夠選擇並進行下載

bindfinish

點擊下載的回調