微信小程序仿手机相册组件——简单版 _生活百科

仿手机相册的微信小程序组件，具备点击图片预览，长按图片出现多选框功能，读者可以根据自己的需求，依据现有数据进行删除等操作。话不多说，先看效果：
【微信小程序仿手机相册组件——简单版】初始效果：

文章插图
长按效果：

文章插图
选择效果：

文章插图
注意：当前只是简单的逻辑，用户注意查看控制台的输出和代码中的注释?。。。。?
上代码：
photo-album.wxml
<view><scroll-view scroll-y="true" style="height: {{contentHeigh}}rpx;background-color: orange;"><checkbox-group bindchange="onCheck"><view class="scroll-acre"><view class="pic" wx:for="{{imgList}}" wx:key="index"><image catchtap="{{onView}}"data-imglist="{{imgList}}"data-currenturl="{{item}}"catchlongpress="longPress"mode="aspectFill"src="https://www.huyubaike.com/biancheng/{{item}}"></image><checkbox hidden="{{!isShow}}" class="checkbox" value="https://www.huyubaike.com/biancheng/{{index}}"></checkbox></view></view></checkbox-group></scroll-view></view>photo-album.wxss
.scroll-acre {display: grid;grid-template-columns: repeat(auto-fill, 25%)}.pic {width: 200rpx;height: 200rpx;border-top: 1rpx solid #ffffff;border-left: 1rpx solid #ffffff;border-right: 1rpx solid #ffffff;}image {width: 200rpx;height: 200rpx;}.checkbox{float: left;margin-top: -206rpx;margin-left: 140rpx;opacity: 0.7;}photo-album.js
// component/photo-album/photo-album.jsComponent({/*** 组件的属性列表*/properties: {// 可滚动区域高度contentHeigh: {type: Number || String,value: 800},//图片列表imgList: {type: Array,value: ['http://placekitten.com/500/500','http://placekitten.com/200/300','http://placekitten.com/200/500','http://placekitten.com/600/200','http://placekitten.com/600/400','http://placekitten.com/600/300','http://placekitten.com/500/200','http://placekitten.com/400/200','http://placekitten.com/700/260','http://placekitten.com/400/230','http://placekitten.com/100/400','http://placekitten.com/300/200','http://placekitten.com/400/200','http://placekitten.com/700/260','http://placekitten.com/400/230','http://placekitten.com/100/400','http://placekitten.com/300/200','http://placekitten.com/400/200','http://placekitten.com/700/260','http://placekitten.com/400/230','http://placekitten.com/100/400','http://placekitten.com/300/200','http://placekitten.com/400/230','http://placekitten.com/100/400','http://placekitten.com/300/200','http://placekitten.com/400/200',]}},/*** 组件的初始数据*/data: {isShow: false, //是否显示多选框 false:不显示onView:'onView', //点击预览图片事件，在长按事件触发后，该值为空，用于暂停该事件触发},/*** 组件的方法列表*/methods: {// 图片点击预览事件onView(options) {console.log("点击了图片：",options);let imgUrls = options.currentTarget.dataset.imglist;//全部图片地址列表let currentUrl = options.currentTarget.dataset.currenturl; //当前点击的图片地址wx.previewImage({urls: imgUrls,current:currentUrl,showmenu:true})},//图片长按事件，触发显示多选框和删除按钮longPress() {console.log("长按了图片");this.setData({isShow: true,onView:''})},//选择框选择事件onCheck(e) {let checkList = e.detail.valueconsole.log("选择的图片序列:", checkList);}},})photo-album.json
{"component": true,"usingComponents": {}}以上便是全部代码，接下来给读者看一下文件结构：

文章插图
最后，记得这是个组件哦，要在页面引入才可以看到效果哈
小程序自定义组件参考文档：自定义组件 | 微信开放文档 (qq.com)
自定义组件 | 微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/