小程序多图片组合

news2024/12/27 9:53:03

目录

子组件 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.coloradmin.cn/o/876948.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AppStream下载元数据失败

AppStream下载元数据失败

错误&#xff1a;为仓库 AppStream 下载元数据失败 : Cannot prepare internal mirrorlist: No URLs in mirrorlist 目录 一、域名解析 二、CentOS-AppStream.repo 三、CentOS-Base.repo 四、CentOS-Extras.repo 五、rpm更新 一、域名解析 先验证 ping www.baidu.com 不…
阅读更多...
【C语言】结构体解谜：拆解数据的力量！

【C语言】结构体解谜：拆解数据的力量！

&#x1f341;博客主页&#xff1a;江池俊的博客 &#x1f4ab;收录专栏&#xff1a;C语言—探索高效编程的基石 &#x1f4a1;代码仓库&#xff1a;江池俊的代码仓库 &#x1f3aa;我的社区&#xff1a;GeekHub &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐…
阅读更多...
9：00面试，9：06就出来了，问的问题实在有点变态。。。

9：00面试，9：06就出来了，问的问题实在有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%,…
阅读更多...
Shell函数调用

Shell函数调用

定义一个函数&#xff0c;计算所有参数的和&#xff1a; #!/bin/bashfunction getsum(){local sum0for n in $do((sumn))donereturn $sum }getsum 10 20 55 15 #调用函数并传递参数 echo $?运行结果&#xff1a; 100
阅读更多...
STM32 cubemx CAN

STM32 cubemx CAN

接收用到的结构体如下&#xff1a;CAN概念&#xff1a; 全称Controller Area Network&#xff0c;是一种半双工&#xff0c;异步通讯。 物理层&#xff1a; 闭环&#xff1a;允许总线最长40m&#xff0c;最高速1Mbps&#xff0c;规定总线两端各有一个120Ω电阻&#xff0c;闭环…
阅读更多...
学习笔记整理-DOM-02-事件监听

学习笔记整理-DOM-02-事件监听

一、什么是"事件监听" DOM允许书写JavaScript代码以让HTML元素对事件作出反应什么是"事件": 用户与网页的交互动作当用户点击元素时当鼠标移动到元素上时当文本框的内容被改变时当键盘在文本框中被按下时当网页已加载完毕时… “监听”&#xff0c;顾名思义…
阅读更多...
项目实战 — 博客系统② {项目构建}

项目实战 — 博客系统② {项目构建}

目录 一、创建项目 二、添加数据库 三、设置配置文件相关信息 四、 添加前端页面 五、构建项目分层 六、编写基本类 一、创建项目 二、添加数据库 -- 创建数据库 drop database if exists cat_blog; create database cat_blog DEFAULT CHARACTER SET utf8mb4;-- 使用数…
阅读更多...
这四种订货系统不能选（一）：不能独立品牌

这四种订货系统不能选（一）：不能独立品牌

随着商业环境的日益竞争和客户需求的不断变化&#xff0c;订货系统正逐渐成为企业管理中不可或缺的一部分。不少企业在订货系统的选择上不知从哪入手&#xff0c;今天我分享哪四种订货系统不能选。大家点个关注点个赞&#xff0c;我们接着往下看。 一、不能独立品牌的订货系统不…
阅读更多...
C语言学习笔记---数据的存储详解

C语言学习笔记---数据的存储详解

C语言程序设计笔记---015 C语言数据的存储1、数据类型的意义1.1、unsigned与signed数据类型例程11.2、补码与原码相互转换例程2 2、大小端的介绍2.1、大小端的例程12.2、大小端的例程2 --- 判断当前编译器环境属于大端或小端 3、综合练习题探究数据的存储3.1、练习题13.2、练习…
阅读更多...
Qt 杂项（Qwt、样式等）

Qt 杂项（Qwt、样式等）

Qt隐藏窗口边框 this->setWindowFlags(Qt::FramelessWindowHint);Qt模态框 this->setWindowModality(Qt::ApplicationModal);QLable隐藏border 代码中设置 lable->setStyleSheet("border:0px");或者UI中直接设置样式&#xff1a;“border:0px” Qwt开源…
阅读更多...
vue3 使用@vue-office/excel预览本地excel文件 demo

vue3 使用@vue-office/excel预览本地excel文件 demo

vue3 使用vue-office/excel预览excel文件 demo 显示如下&#xff1a; npm地址&#xff1a;https://www.npmjs.com/package/vue-office/excel vue-office还有pdf和docx&#xff0c;按需下载对应插件 npm install vue-office/excel vue-demivue代码如下 app.vue <templ…
阅读更多...
2.Model、ModelMap和ModelAndView的使用详解

2.Model、ModelMap和ModelAndView的使用详解

1.前言 最近SSM框架开发web项目&#xff0c;用得比较火热。spring-MVC肯定用过&#xff0c;在请求处理方法可出现和返回的参数类型中&#xff0c;最重要就是Model和ModelAndView了&#xff0c;对于MVC框架&#xff0c;控制器Controller执行业务逻辑&#xff0c;用于产生模型数据…
阅读更多...
腾讯云国际站代充-阿里云ECS怎么一键迁移到腾讯云cvm？

腾讯云国际站代充-阿里云ECS怎么一键迁移到腾讯云cvm？

今天主要来介绍一下如何通过阿里云国际ECS控制台一键迁移至腾讯云国际CVM。腾讯云国际站云服务器CVM提供全面广泛的服务内容。无-需-绑-定PayPal&#xff0c;代-充-值腾讯云国际站、阿里云国际站、AWS亚马逊云、GCP谷歌云&#xff0c;官方授权经销商&#xff01;靠谱&#xff0…
阅读更多...
嵌入式Qt开发—Excel表格数据导出

嵌入式Qt开发—Excel表格数据导出

有一个嵌入式Excel表格数据导出的需求&#xff1a;应用软件运行于嵌入式Linux平台上&#xff0c;在设备运行过程中&#xff0c;存储了许多数据&#xff0c;这些数据想以表格的形式导出。考虑到Windows平台的普遍性&#xff0c;需要将数据以excel表格形式导出&#xff0c;故选择…
阅读更多...
基于机器学习的假新闻检测 -- 机器学习项目基础篇（14）

基于机器学习的假新闻检测 -- 机器学习项目基础篇（14）

不同平台上的假新闻正在广泛传播&#xff0c;这是一个令人严重关切的问题&#xff0c;因为它导致社会稳定和人们之间建立的纽带的永久破裂。很多研究已经开始关注假新闻的分类。 在这里&#xff0c;我们将尝试在Python中的机器学习的帮助下解决这个问题。 主要步骤 导入库和数…
阅读更多...
一生一芯4——使用星火应用商店在ubuntu下载QQ、微信、百度网盘

一生一芯4——使用星火应用商店在ubuntu下载QQ、微信、百度网盘

星火应用商店可以非常方便的完成一些应用的下载&#xff0c;下面是官方网址 http://spark-app.store/download 我使用的是intel处理器&#xff0c;无需下载依赖项&#xff0c;直接点击软件本体 我这里下载amd64,根据自己的处理器下载对应版本 sudo apt install ./spark-stor…
阅读更多...
影响股票数据接口l2传输数据快慢因素有哪些？（l2数据接口）

影响股票数据接口l2传输数据快慢因素有哪些？（l2数据接口）

股票数据接口l2是一种用于获取股票市场相关数据的编程接口。它允许开发者通过编程的方式获取、查询、订阅和更新股票相关数据&#xff0c;如股票价格、成交量、财务数据等&#xff0c;并将这些数据用于自己的应用或系统中。l2数据接口通常提供实时行情数据、历史行情数据、财务…
阅读更多...
如何批量替换文件名称的一部分？

如何批量替换文件名称的一部分？

如何批量替换文件名称的一部分&#xff1f;在工作和生活中&#xff0c;我们经常需要对一些文件和文件夹进行批量修改操作&#xff0c;其中最常见的是对文件名进行部分更改&#xff0c;例如批量替换文件名中的一部分分子。这些操作不仅可以提高工作效率&#xff0c;还能帮助我们…
阅读更多...
elementUI 的上传组件＜el-upload＞，自定义上传按钮样式

elementUI 的上传组件＜el-upload＞，自定义上传按钮样式

方法一&#xff1a; 原理&#xff1a;调用<el-upload>组件的方法唤起选择文件事件 效果&#xff1a; 页面代码&#xff1a; 1、选择图片按钮 <div class"flex_row_spacebetween btn" click"chooseImg"><span class"el-icon-plus ic…
阅读更多...
Boost开发指南-4.4assign

Boost开发指南-4.4assign

assign 许多情况下我们都需要为容器初始化或者赋值&#xff0c;填入大量的数据&#xff0c;比如初始错误代码和错误信息&#xff0c;或者是一些测试用的数据。在C98中标准容器仅提供了容纳这些数据的方法&#xff0c;但填充的步骤却是相当地麻烦&#xff0c;必须重复调用inser…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023