小程序多图片组合

目录

子组件 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.mzph.cn/news/46053.shtml

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

相关文章

回归预测 | MATLAB实现GWO-SVM灰狼优化算法优化支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GWO-SVM灰狼优化算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GWO-SVM灰狼优化算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基…

图论基础和表示(Java 实例代码)

目录 图论基础和表示 一、概念及其介绍 二、适用说明 三、图的表达形式 Java 实例代码 src/runoob/graph/DenseGraph.java 文件代码&#xff1a; src/runoob/graph/SparseGraph.java 文件代码&#xff1a; 图论基础和表示 一、概念及其介绍 图论(Graph Theory)是离散数…

MySQL基础篇(二)

DML 定义&#xff1a;Data Manipulation Language、数据操作语言&#xff08;增删改&#xff09; 添加数据&#xff08;INSERT&#xff09;修改数据&#xff08;UPDATE&#xff09;删除数据&#xff08;DELETE&#xff09; 添加数据&#xff08;INSERT&#xff09; 给指定的…

Nginx:网站服务

nginx&#xff1a;一个高性能、轻量级的web服务软件 1、稳定性高&#xff08;没有apache稳&#xff09; 2、系统资源消耗低&#xff08;处理http请求的并发能力很高&#xff0c;单台物理服务器可以处理3万到5万个并发请求&#xff09; 稳定&#xff1a;一般在企业中&#xff…

系统架构设计专业技能 · 信息安全技术

系列文章目录 系统架构设计专业技能 网络技术&#xff08;三&#xff09; 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 …

<数据结构与算法>堆的应用二叉树的链式实现

目录 前言 一、堆的应用 1. 堆排序 1.1 排升序&#xff0c;建大堆 1.2 时间复杂度计算 2. Top k问题 二、 二叉树的链式实现 1. 二叉树的遍历 2. 二叉树基础OJ 2.2 100. 相同的树 总结 前言 学习完堆的数据结构&#xff0c;我们要清楚&#xff0c;它虽然实现了排序功能&am…

售后服务管理软件怎么选择?售后服务管理系统有什么用?

随着企业信息化发展&#xff0c;越来越多的企业纷纷选择售后服务管理软件来服务客户和进行内部人员管理。借助这款软件&#xff0c;企业能够高效地满足客户提出的需求&#xff0c;并提高客户对售后服务的满意度。售后服务通常涉及客户、客服、维修师傅和服务管理人员等各种角色…

用C++/JS/Python/Java代码描述秋天的味道

前言 秋天是一个充满诗意和浪漫的季节&#xff0c;它带来了清新、芬芳和美食的味道。让我们一起探索如何用编程语言来写出秋天味道的代码吧&#xff01;无论是C、JavaScript、Python还是Java&#xff0c;以下是几个简单的步骤来帮助你创造出充满秋天味道的代码&#xff1a; …

Redis缓存问题(穿透, 击穿, 雪崩, 污染, 一致性)

目录 1.什么是Redis缓存问题&#xff1f; 2.缓存穿透 3.缓存击穿 4.缓存雪崩 5.缓存污染&#xff08;或满了&#xff09; 5.1 最大缓存设置多大 5.2 缓存淘汰策略 6.数据库和缓存一致性 6.1 4种相关模式 6.2 方案&#xff1a;队列重试机制 6.3 方案&#xff1a;异步更新缓…

[C++11]

文章目录 1. 自动类型推导1.1 auto1.1.1 推导规则1.1.2 auto的限制1.1.3 auto的应用1.1.4 范围for 1.2 decltype1.2.1 推导规则1.2.2 decltype的应用 1.3 返回类型后置 2.可调用对象包装器、绑定器2.1 可调用对象包装器2.1.1 基本用法2.1.2 作为回调函数使用 2.2 绑定器 3. usi…

idea创建javaweb项目,jboss下没有web application

看看下图这个地方有没有web application

C++_模板进阶_非类型模板参数_模板特化_分离编译

一、非类型模板参数 模板参数&#xff0c;分为类型形参和非类型形参。 类型形参就是在模板中跟在typename和class之后的参数类型名称&#xff0c;非类型形参就是用一个常量作为类模板或者函数模板的一个参数&#xff0c;在类模板和函数模板中&#xff0c;可以将该参数当作常量…

【JUC系列-01】深入理解JMM内存模型的底层实现原理

一&#xff0c;深入理解JMM内存模型 1&#xff0c;什么是可见性 在谈jmm的内存模型之前&#xff0c;先了解一下并发并发编程的三大特性&#xff0c;分别是&#xff1a;可见性&#xff0c;原子性&#xff0c;有序性。可见性指的就是当一个线程修改某个变量的值之后&#xff0c…

卷积神经网络全解:(AlexNet/VGG/ GoogLeNet/LeNet/ResNet/卷积/激活/池化/全连接)、现代卷积神经网络、经典卷积神经网络

CNN&#xff0c;卷积神经网络&#xff0c;Convolution Neural Network 卷积计算公式&#xff1a;N &#xff08;W-F2p&#xff09;/s1 这个公式每次都得看看&#xff0c;不能忘 1 经典网络 按照时间顺序 1.1 LeNet LeNet是 Yann LeCun在1998年提出&#xff0c;用于解决手…

Lua 数据结构

一、Lua 中的数据结构 Lua 中并没有像 java、kotlin 语言有专门的数组、列表、集合等数据结构的类&#xff0c;而只提供 table 类型&#xff0c;但他很强大而且也很灵活&#xff0c;而且也在很多场景中天然的就解决了如何对接和使用的问题&#xff08;例如模块的引入&#xff…

MYSQL完全卸载、安装与账号创建、权限控制

一、卸载mysql CentOS 卸载 MySQL 1. 查看安装情况 使用以下命令查看当前安装mysql情况&#xff0c;查找以前是否装有mysql rpm -qa|grep -i mysql这里显示我安装的 MySQL 服务有有&#xff1a; 2. 停止 mysql 服务、删除之前安装的 mysql 删除命令&#xff1a;rpm -e –n…

C++笔记之条件变量(Condition Variable)与cv.wait 和 cv.wait_for的使用

C笔记之条件变量&#xff08;Condition Variable&#xff09;与cv.wait 和 cv.wait_for的使用 参考博客&#xff1a;C笔记之各种sleep方法总结 code review! 文章目录 C笔记之条件变量&#xff08;Condition Variable&#xff09;与cv.wait 和 cv.wait_for的使用1.条件变量&…

v8引擎编译全过程

环境vs2019 cmd 命令行需要设置成为代理模式 set http_proxyhttp://127.0.0.1:10809 set https_proxyhttp://127.0.0.1:10809 这个必须带上&#xff0c;不然报错&#xff0c;告诉编译器win系统的模式 set DEPOT_TOOLS_WIN_TOOLCHAIN0 源码 GitHub: GitHub - v8/v8: The…

Eclipse如何设置快捷键

在eclopse设置注释行和取消注释行 // 打开eclipse&#xff0c;依次打开&#xff1a;Window -> Preferences -> General -> Key&#xff0c;

solidwords(6)

从右视图开始&#xff0c;分上下两部分 标题 这里的薄壁要留意一下怎么算的&#xff08;单向&#xff1a;默认向内&#xff1b;如果想向外记得选反向&#xff09;