小程序多图片组合

目录

子组件 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",]
    },

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

美国FDA医疗器械分类目录数据库查询

美国FDA医疗器械分类目录数据库查询

最近我们在接到FDA医疗器械咨询项目时&#xff0c;经常收到客户关于公司产品在美国FDA医疗器械认证中或是国内所属的产品类别以及如何查询产品分类的疑问。在这里&#xff0c;我将为大家解答这些问题&#xff0c;希望能够提供帮助&#xff01; 美国FDA医疗器械产品目录中包含了…
阅读更多...
Windows权限维持—自启动映像劫持粘滞键辅助屏保后门WinLogon

Windows权限维持—自启动映像劫持粘滞键辅助屏保后门WinLogon

Windows权限维持—自启动&映像劫持&粘滞键&辅助屏保后门&WinLogon 1. 前置2. 自启动2.1. 路径加载2.1.1. 放置文件2.1.2. 重启主机 2.2. 服务加载2.2.1. 创建服务2.2.2. 查看服务2.2.3. 重启主机 2.3. 注册表加载2.3.1. 添加启动项2.3.2. 查看注册表2.3.3. 重启…
阅读更多...
【JAVA】数组练习

【JAVA】数组练习

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 数组练习 1. 数组转字符串2. 数组拷贝3.…
阅读更多...
Android设备通过蓝牙HID技术模拟键盘实现

Android设备通过蓝牙HID技术模拟键盘实现

目录 一&#xff0c;背景介绍 二&#xff0c;技术方案 2.1 获取BluetoothHidDevice实例 2.2 注册/解除注册HID实例 2.3 Hid report description描述符生成工具 2.4 键盘映射表 2.5 通过HID发送键盘事件 三&#xff0c;实例 一&#xff0c;背景介绍 日常生活中&#xff0…
阅读更多...
vue : 无法加载文件 F:\nodejs\vue.ps1，因为在此系统上禁止运行脚本。

vue : 无法加载文件 F:\nodejs\vue.ps1，因为在此系统上禁止运行脚本。

报错信息如下 在使用Windows PowerShell输入指令查看版本时或者用脚手架创建vue项目时都有可能报错&#xff0c;报错信息如下&#xff1a;vue : 无法加载文件 F:\nodejs\vue.ps1&#xff0c;因为在此系统上禁止运行脚本 解决方案&#xff1a; 原因&#xff1a;因为Windows Po…
阅读更多...
儿童学python语言能做什么,小孩学python到底好不好

儿童学python语言能做什么,小孩学python到底好不好

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;儿童学python语言能做什么&#xff0c;小孩学python课程需要多久&#xff0c;现在让我们一起来看看吧&#xff01; 对于刚开始学习编程的孩子来说&#xff0c;图形化的Scratch是很好的启蒙语言。它用类似于拼图的模式&a…
阅读更多...
自适应AI chatgpt智能聊天创作官网html源码

自适应AI chatgpt智能聊天创作官网html源码

我们致力于开发先进的自适应AI智能聊天技术&#xff0c;旨在为用户提供前所未有的聊天体验。通过融合自然语言处理、机器学习和深度学习等领域的顶尖技术&#xff0c;我们的智能聊天系统能够准确理解用户的需求并给出相应的回应。 我们的自适应AI智能聊天系统具备以下核心特点…
阅读更多...
软件需求-架构师之路（五）

软件需求-架构师之路（五）

软件需求 软件需求&#xff1a; 指用户 对系统在功能、行为、性能、设计约束等方面的期望。 分为 需求开发 和 需求管理 两大过程。 需求开发&#xff1a; 需求获取需求分析需求定义&#xff08;需求规格说明书&#xff09;需求验证&#xff1a;拉客户一起评审&#xff0c…
阅读更多...
Golang 局部变量、全局变量 声明

Golang 局部变量、全局变量 声明

文章目录 一、局部变量二、全局变量 一、局部变量 四种声明方式 多变量声明&#xff1a; package mainimport "fmt"//局部变量声明 func main() {//方法一: 声明一个变量和数据类型&#xff0c;不初始化值&#xff1b;默认值为0&#xff1b;var lvA intfmt.Printl…
阅读更多...
1572. 矩阵对角线元素的和

1572. 矩阵对角线元素的和

题目描述&#xff1a; 给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 示例&#xff1a; 解题思路&#xff1a; 同时求对角线和副对角线上元素的和再减去重合的元素 相关代码&#xf…
阅读更多...
JVM---jvm里的内存溢出

JVM---jvm里的内存溢出

目录 堆溢出 虚拟机栈和本地方法栈溢出&#xff08;栈溢出很少出现&#xff09; 方法区和运行时常量池溢出 本机内存直接溢出&#xff08;实际中很少出现、了解即可&#xff09; 堆溢出 堆溢出&#xff1a;最常见的是大list&#xff0c;list里面有很多元素 堆溢出该怎么解决…
阅读更多...
途乐证券-新股行情持续火爆，哪些因素影响首日表现？

途乐证券-新股行情持续火爆，哪些因素影响首日表现？

全面注册制以来&#xff0c;参加打新的投资者数量全体呈现下降。打新收益下降&#xff0c;破发频出的布景下&#xff0c;投资者打新策略从逢新必打逐步向优选个股改变。 经过很多历史数据&#xff0c;从商场定价、参加者热度以及机构重视度维度揭秘了上市后股价体现优秀的个股具…
阅读更多...
力扣 279. 完全平方数

力扣 279. 完全平方数

题目来源&#xff1a;https://leetcode.cn/problems/perfect-squares/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a; 动规五部曲分析如下&#xff1a; 确定dp数组&#xff08;dp table&#xff09;以及下标的含义。dp[j]&#xff1a;和为j的完全平方…
阅读更多...
如何仿写简易tomcat 实现思路+代码详细讲解

如何仿写简易tomcat 实现思路+代码详细讲解

仿写之前&#xff0c;我们要搞清楚都要用到哪些技术 自定义注解&#xff0c;比如Tomcat使用的是Servlet&#xff0c;我们可以定义一个自己的MyServlet构造请求体和返回体&#xff0c;比如tomcat使用HttpRequest&#xff0c;我们可以自己定义myHttpRequestjava去遍历一个指定目…
阅读更多...
Matlab工具NIFTI包的基本功能函数

Matlab工具NIFTI包的基本功能函数

Matlab工具NIFTI包的基本功能函数 Nifti 格式最初是为神经影像学发明的。神经影像信息学技术计划&#xff08;NIFTI&#xff09;将 NIfTI 格式预设为 ANALYZE7.5 格式的替代品。它最初的应用领域是神经影像&#xff0c;但是也被用在其他领域。这种格式的主要特点就是它包含两个…
阅读更多...
Docker容器：docker基础概述、docker安装、docker网络

Docker容器：docker基础概述、docker安装、docker网络

文章目录 一.docker容器概述1.什么是容器2. docker与虚拟机的区别2.1 docker虚拟化产品有哪些及其对比2.2 Docker与虚拟机的区别 3.Docker容器的使用场景4.Docker容器的优点5.Docker 的底层运行原理6.namespace的六项隔离7.Docker核心概念 二.Docker安装 及管理1.安装 Docker1.…
阅读更多...
【Unity造轮子】制作一个简单的2d抓勾效果(类似蜘蛛侠的技能)

【Unity造轮子】制作一个简单的2d抓勾效果(类似蜘蛛侠的技能)

文章目录 前言开始1. 实现简单的抓勾效果2. 高阶钩爪效果 源码参考完结 前言 欢迎阅读本文&#xff0c;本文将向您介绍如何使用Unity游戏引擎来实现一个简单而有趣的2D抓勾效果&#xff0c;类似于蜘蛛侠的独特能力。抓勾效果是许多动作游戏和平台游戏中的常见元素&#xff0c;…
阅读更多...
zookeeper案例

zookeeper案例

目录 案例一&#xff1a;服务器动态上下线 服务端&#xff1a; &#xff08;1&#xff09;先获取zookeeper连接 &#xff08;2&#xff09;注册服务器到zookeeper集群&#xff1a; &#xff08;3&#xff09;业务逻辑&#xff08;睡眠&#xff09;&#xff1a; 服务端代码…
阅读更多...
区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRBiLSTM双向长短期记忆神经网络分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 区间预测 | MATLAB实现QRBiLSTM双向长短…
阅读更多...
SpringBoot案例 调用第三方接口传输数据

SpringBoot案例 调用第三方接口传输数据

一、前言 最近再写调用三方接口传输数据的项目&#xff0c;这篇博客记录项目完成的过程&#xff0c;方便后续再碰到类似的项目可以快速上手 项目结构&#xff1a; 二、编码 这里主要介绍HttpClient发送POST请求工具类和定时器的使用&#xff0c;mvc三层架构编码不做探究 pom.x…
阅读更多...
最新文章

Copyright @ 2022~2023