wxml 點選圖檔下載下傳_小程式自定義圖檔預覽和多圖下載下傳的實作

小程式開發中圖檔清單的需求再常見不過了，通常都會配合大圖預覽和圖檔下載下傳的功能

但是微信又沒有提供可自定義的圖檔預覽功能，有時候會有需求在預覽大圖的時候收藏或者下載下傳啥的用 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

圖檔清單資料結構

[{

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

選擇

完成

配置

option [預設] normal

用來切換操作方式

切換為 download 時，則可以選擇并進行下載下傳

bindfinish

點選下載下傳的回調