发表日期:2019-10 文章编辑:小灯 浏览次数:959
小程序开发中图片列表的需求再常见不过了,通常都会配合大图预览和图片下载的功能
但是微信又没有提供可自定义的图片预览功能,有时候会有需求在预览大图的时候收藏或者下载啥的用 wx.previewImage 就不太合适了
下面提供了一个 照片墙实现自定义图片预览和多图下载 的实现方式,有类似需求的同学可以尝试一下
有问题也欢迎提出 GITHUB
小程序照片墙/自定义大图预览/多图下载
npm install --save --production mp-photo-album
{
"usingComponents": {
"mp-photo-album": "/miniprogram_npm/mp-photo-album/index"
}
}
<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
关闭预览回调
选择多图,点击下载保存到相册,最多同时9张
<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
点击下载的回调
日期:2019-11 浏览次数:4775
日期:2019-11 浏览次数:11197
日期:2019-11 浏览次数:3636
日期:2019-11 浏览次数:4546
日期:2019-11 浏览次数:4648
日期:2019-11 浏览次数:6312
日期:2019-11 浏览次数:4569
日期:2019-11 浏览次数:15016
日期:2019-11 浏览次数:3917
日期:2019-11 浏览次数:5680
日期:2019-11 浏览次数:4514
日期:2019-11 浏览次数:3853
日期:2019-11 浏览次数:9609
日期:2019-11 浏览次数:7526
日期:2019-11 浏览次数:4215
日期:2019-11 浏览次数:3610
日期:2019-11 浏览次数:8145
日期:2019-11 浏览次数:3866
日期:2019-11 浏览次数:4038
日期:2019-11 浏览次数:4105
日期:2019-11 浏览次数:3664
日期:2019-11 浏览次数:4257
日期:2019-11 浏览次数:9440
日期:2019-11 浏览次数:4456
日期:2019-11 浏览次数:4443
日期:2019-11 浏览次数:4034
日期:2019-11 浏览次数:11354
日期:2019-11 浏览次数:6647
日期:2019-11 浏览次数:6905
日期:2019-11 浏览次数:4255
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.