小程序多图片组合

目录

子组件 index.js

子组件 index.wxml

子组件 index.wxss 

父组件引用：

 

 

 

子组件：preview-image

子组件 index.js

Component({properties: {previewData: {type: Array,default: [],observer: function (newVal, oldVal) {console.log('newVal, oldVal', newVal, oldVal);const previewImages = [];newVal.map(item => {previewImages.push(item);});this.setData({previewImages});this.formatImageList(newVal);}}},data: {previewImages: [],imgArr: [],boxClass: 'one'},methods: {formatImageList(imageArr) {console.log('imageArr---', imageArr);const arrLength = imageArr.length;if (arrLength == 1) {this.setData({imgArr: imageArr,boxClass: 'one'});}if (arrLength == 2) {this.setData({imgArr: imageArr,boxClass: 'two'});}if (arrLength == 3) {const firstArr = [...imageArr.splice(0, 1)];const threeArr = [[...firstArr], [...imageArr]];this.setData({imgArr: threeArr,boxClass: 'three'});}if (arrLength == 4) {this.setData({imgArr: imageArr,boxClass: 'four'});}if (arrLength == 5) {const firstArr = [...imageArr.splice(0, 1)];const fiveArr = [[...firstArr], [...imageArr]];this.setData({imgArr: fiveArr,boxClass: 'five'});}if (arrLength == 6) {this.setData({imgArr: imageArr,boxClass: 'six'});}if (arrLength == 7) {const firstArr = [...imageArr.splice(0, 1)];const secondArr = [...imageArr.splice(0, 4)]const sevenArr = [[...firstArr], [...secondArr], [...imageArr]];console.log('sevenArr', sevenArr);this.setData({imgArr: sevenArr,boxClass: 'seven'});}if (arrLength == 8) {const firstArr = [...imageArr.splice(0, 1)];const secondArr = [...imageArr.splice(0, 4)]const eightArr = [[...firstArr], [...secondArr], [...imageArr]];console.log('eightArr', eightArr);this.setData({imgArr: eightArr,boxClass: 'eight'});}if (arrLength >= 9) {const firstArr = [...imageArr.splice(0, 1)];const secondArr = [...imageArr.splice(0, 4)]const nineArr = [[...firstArr], [...secondArr], [...imageArr]];console.log('nineArr', nineArr);this.setData({imgArr: nineArr,boxClass: 'nine'});}},onImageMore(e) {console.log('onImageMore', e);const {url} = e.currentTarget.dataset;const {previewImages} = this.data;wx.previewImage({urls: previewImages,current: url});}}
});

子组件 index.wxml

<view class="preview-img {{boxClass}}"wx:if="{{previewImages.length == 3 || previewImages.length == 5 || previewImages.length == 7 || previewImages.length == 8 || previewImages.length >= 9}}"><view class="img-box" wx:for="{{imgArr}}" wx:key="index"><block wx:for="{{item}}" wx:for-item="_item" wx:for-index="_index" wx:key="_index"><view class="box-image" wx:if="{{_index <= 3}}"><image mode="scaleToFill" src="{{_item}}"></image><view class="box-image-shade" data-url="{{_item}}" bindtap="onImageMore"wx:if="{{item.length > 4 && _index == 3}}"><view class="shade-more"><van-icon name="arrow"/><van-icon name="arrow" custom-style="margin-left:-16rpx;"/></view><view>{{previewImages.length}}张</view></view></view></block></view>
</view>
<view class="preview-img {{boxClass}}" wx:else><view class="box-image" wx:for="{{imgArr}}" wx:key="index"><image mode="scaleToFill" src="{{item}}"></image></view>
</view>

子组件 index.wxss 

.preview-img {padding: 16rpx 5rpx 0;box-sizing: border-box;
}.box-image {margin-top: 10rpx;width: 315rpx;height: 315rpx;border-radius: 6rpx;overflow: hidden;
}.box-image image {width: 100%;height: 100%;display: block;
}.two {display: flex;align-items: center;justify-content: flex-start;
}.two .box-image + .box-image {margin-left: 12rpx;
}.three, .five, .seven, .eight, .nine {display: flex;align-items: center;justify-content: flex-start;
}.three .img-box + .img-box {margin-left: 12rpx;
}.three .img-box + .img-box .box-image {width: 154rpx;height: 153rpx;
}.four {display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-start;
}.four .box-image {width: 205rpx;height: 205rpx;margin-right: 14rpx;margin-top: 14rpx;
}.five .img-box + .img-box {margin-left: 12rpx;display: flex;justify-content: space-between;flex-wrap: wrap;
}.five .img-box + .img-box .box-image {width: 153rpx;height: 153rpx;
}.six {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;
}.six .box-image {width: 205rpx;height: 205rpx;margin-top: 14rpx;
}.seven, .eight, .nine {flex-wrap: wrap;
}.seven .img-box:nth-child(2), .eight .img-box:nth-child(2), .nine .img-box:nth-child(2) {margin-left: 12rpx;display: flex;justify-content: space-between;flex-wrap: wrap;width: 315rpx;
}.seven .img-box:nth-child(2) .box-image, .eight .img-box:nth-child(2) .box-image, .nine .img-box:nth-child(2) .box-image {width: 153rpx;height: 153rpx;
}.seven .img-box:nth-child(3) {width: 100%;display: flex;align-items: center;justify-content: flex-start;
}.seven .img-box:nth-child(3) .box-image + .box-image {margin-left: 12rpx;margin-top: 14rpx;width: 315rpx;
}.eight .img-box:nth-child(3), .nine .img-box:nth-child(3) {width: 100%;display: flex;align-items: center;justify-content: space-between;
}.eight .img-box:nth-child(3) .box-image {width: 206rpx;height: 206rpx;margin-top: 14rpx;
}.nine .img-box:nth-child(3) .box-image {width: 152rpx;height: 152rpx;margin-top: 12rpx;position: relative;
}.box-image-shade {width: 152rpx;height: 152rpx;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.55);text-align: center;font-size: 28rpx;font-family: PingFang-SC-Medium, PingFang-SC;font-weight: 500;color: #FFFFFF;line-height: 42rpx;padding-top: 36rpx;box-sizing: border-box;
}

父组件引用：

引用的时候在外层包一个盒子设置宽度

 wxml：

 <preview-image model:preview-data="{{limagePreviewArn}}"></preview-image>

js：

 data: {limagePreviewArn: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg","https://img01.yzcdn.cn/vant/apple-1.jpg","https://img01.yzcdn.cn/vant/apple-2.jpg","https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg","https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg","https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg","https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg","https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg","https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg","https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg","https://img01.yzcdn.cn/vant/cat.jpeg",]},

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/71073.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【编程二三事】ES究竟是个啥？

【编程二三事】ES究竟是个啥？

在最近的项目中&#xff0c;总是或多或少接触到了搜索的能力。而在这些项目之中&#xff0c;或多或少都离不开一个中间件 - ElasticSearch。 今天忙里偷闲&#xff0c;就来好好了解下这个中间件是用来干什么的。 ES是什么? ​ ES全称ElasticSearch&#xff0c;是个基于Lucen…
阅读更多...
UG NX二次开发（C#）-CAM-获取刀具类型

UG NX二次开发（C#）-CAM-获取刀具类型

文章目录 1、前言2、UG NX中的刀具类型3、获取刀具类型3.1 刀具类型帮助文档1、前言 在UG NX的加工模块，加工刀具是一个必要的因素，其包括了多种类型的类型，有铣刀、钻刀、车刀、磨刀、成型刀等等，而且每种刀具所包含的信息也各不相同。想获取刀具的信息，那就要知道刀具的…
阅读更多...
开源数据库Mysql_DBA运维实战 （修改root密码）

开源数据库Mysql_DBA运维实战 （修改root密码）

MySQL——修改root密码的4种方法 本文以windows为例为大家详细介绍下MySQL修改root密码的4种方法&#xff0c;大家可以可以根据的自己的情况自由选择&#xff0c;希望对大家有所帮助 方法1&#xff1a; 用SET PASSWORD命令 首先登录MySQL。 格式&#xff1a;mysql> set pass…
阅读更多...
【回溯】总结

【回溯】总结

1、 组合和子集问题 组合问题需要满足一定要求才算作一个答案&#xff0c;比如数量要求&#xff08;k个数&#xff09;&#xff0c;累加和要求&#xff08;target&#xff09;。 子集问题是只要构成一个新的子集就算作一个答案。 进阶&#xff1a;去重逻辑。 一般都是要对同…
阅读更多...
Grafana Prometheus 通过JMX监控kafka 【2023最新方式】

Grafana Prometheus 通过JMX监控kafka 【2023最新方式】

第三方kafka exporter方案 目前网上关于使用Prometheus 监控kafka的大部分资料都是使用一个第三方的 kafka exporter&#xff0c;他的原理大概就是启动一个kafka客户端&#xff0c;获取kafka服务器的信息&#xff0c;然后提供一些metric接口供Prometheus使用&#xff0c;随意它…
阅读更多...
【MySQL系列】-回表、覆盖索引真的懂吗

【MySQL系列】-回表、覆盖索引真的懂吗

【MySQL系列】-回表、覆盖索引真的懂吗 文章目录 【MySQL系列】-回表、覆盖索引真的懂吗一、MYSQL索引结构1.1 索引的概念1.2 索引的特点1.3 索引的优点1.4 索引的缺点 二、B-Tree与BTree2.1 B-Tree2.2 BTree2.3 B-Tree 与BTree树的区别2.4 那么为什么InnoDB的主键最好要搞成有…
阅读更多...
重发布 路由策略

重发布 路由策略

[r4]ip ip_prefix 15 permit 192.168.3.0 24. 根据序号插入规则 [r4]undo ip-prefix aa index 15. 删除规则 [r4]ip ip-prefix aa permit 192.168.3.0 24 less- equal 28 抓取目标网段为3.0掩码长度为24到28的路由 [r4]ip ip-prefix aa permit 192.168.3.0 24 greate…
阅读更多...
如何在安卓设备上安装并使用 ONLYOFFICE 文档

如何在安卓设备上安装并使用 ONLYOFFICE 文档

您可以使用文档安卓版应用&#xff0c;在移动设备上访问存在您 ONLYOFFICE 帐号中的文件。阅读本文&#xff0c;了解如何操作。 什么是 ONLYOFFICE 文档安卓版 适用于 Android 系统的 ONLYOFFICE 文档是一款全面的办公工具&#xff0c;您可以使用它&#xff0c;查看、创建、编…
阅读更多...
MySQL— 基础语法大全及操作演示！！！（下）

MySQL— 基础语法大全及操作演示！！！（下）

MySQL—— 基础语法大全及操作演示&#xff08;下&#xff09;—— 持续更新 三、函数3.1 字符串函数3.2 数值函数3.3 日期函数3.4 流程函数 四、约束4.1 概述4.2 约束演示4.3 外键约束4.3.1 介绍4.3.2 语法4.3.3 删除/更新行为 五、多表查询5.1 多表关系5.1.1 一对多5.1.2 多对…
阅读更多...
2022年09月 C/C++（二级）真题解析#中国电子学会#全国青少年软件编程等级考试

2022年09月 C/C++（二级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;统计误差范围内的数 统计一个整数序列中与指定数字m误差范围小于等于X的数的个数。 时间限制&#xff1a;5000 内存限制&#xff1a;65536 输入 输入包含三行&#xff1a; 第一行为N&#xff0c;表示整数序列的长度(N < 100); 第二行为N个整数&#xff0c;…
阅读更多...
数据结构之动态内存管理机制

数据结构之动态内存管理机制

目录 数据结构之动态内存管理机制 占用块和空闲块 系统的内存管理 可利用空间表 分配存储空间的方式 空间分配与回收过程产生的问题 边界标识法管理动态内存 分配算法 回收算法 伙伴系统管理动态内存 可利用空间表中结点构成 分配算法 回收算法 总结 无用单元收…
阅读更多...
亚马逊新品如何快速上首页

亚马逊新品如何快速上首页

将亚马逊新品快速上首页是许多卖家的目标&#xff0c;但要注意&#xff0c;这涉及到多种因素&#xff0c;包括产品质量、市场竞争、营销策略等。以下是一些可能帮助您的亚马逊新品快速上首页的方法&#xff1a; 1、优化产品信息&#xff1a;确保您的产品标题、描述和关键词字段…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023