小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage 就不太合适了下面提供了一个 照片墙实现自定义图片预览和多图下载 的实现方式,有类似需求的同学可以尝试一下有问题也欢迎提出 GITHUBmp-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点击下载的回调