当前位置： 首页 > news >正文

小程序多图片组合

news 2025/8/6 5:34:12

目录

子组件 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.lryc.cn/news/124491.html

相关文章：

  • YOLO v8目标跟踪详细解读（二）
  • 【广州华锐视点】AR电力职业技能培训系统让技能学习更“智慧”
  • C#学习，反射
  • 代理模式概述
  • 最新AI系统ChatGPT网站程序源码+搭建教程/公众号/H5端/安装配置教程/完整知识库
  • 前端Flex布局
  • 文盘Rust -- Mutex解决并发写文件乱序问题 | 京东云技术团队
  • 数据结构算法--2 冒泡排序，选择排序，插入排序
  • 秋招面经——快手
  • 【STM32RT-Thread零基础入门】 2. 新建RT-Thread项目
  • 别人直播的时候怎么录屏？分享一些录屏方法
  • React Native 在高IOS版本下无法显示图片的问题处理
  • SSH远程连接MacOS catalina并进行终端颜色配置
  • 用JSON.toJSONString转JSON时，属性的值为null时，输出的JSON里没有该属性
  • Java版企业电子招标采购系统源码—企业战略布局下的采购寻源tbms
  • 轻拍牛头(约数)
  • Vc - Qt - 绘制窗口背景色
  • js和cocos creator学习笔记
  • Ceph分布式存储系统
  • 阿里云SMS，APi接口返回错误码
  • Floyd算法
  • SpringBoot究竟应该如何学习？
  • 为什么很多人认为ChatGPT最好的替代工具是Claude？
  • 学习Vue：简介和优势
  • ***is not a commit and a branch ‘***‘ cannot be created from it 报错
  • QT信号槽连接方式
  • 【yml文件的解释】
  • ChatGPT or BingChat
  • QT 使用第三方库QtXlsx操作Excel表
  • 警惕网络个人技术人员：隐藏代码风险的启示