小程序多图片组合

这篇具有很好参考价值的文章主要介绍了小程序多图片组合。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

子组件 index.js

子组件 index.wxml

子组件 index.wxss 

父组件引用:


 

 小程序多图片组合,微信小程序,小程序,前端,javascript

 

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

 文章来源地址https://www.toymoban.com/news/detail-648153.html

到了这里,关于小程序多图片组合的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • PHP+MySQL组合开发:微信小程序万能建站源码系统 附带完整的搭建教程

    随着移动互联网的快速发展,微信小程序已成为企业进行移动营销的重要工具。然而,对于许多中小企业和个人开发者来说,开发一个功能完善、用户体验良好的小程序是一项复杂的任务。罗峰给大家分享一款微信小程序万能建站源码系统。该系统采用PHP+MySQL组合开发,为开

    2024年01月20日
    浏览(31)
  • 微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

    目录 微信小程序实现将图片保存到手机相册(方案一) 微信小程序实现将图片保存到手机相册(方案二) 微信小程序之点击复制文本到剪贴板 微信小程序---判断是IOS还是安卓 微信小程序分享图片给微信好友 首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用

    2023年04月20日
    浏览(15)
  • 微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

    目录 微信小程序实现将图片保存到手机相册(方案一) 微信小程序实现将图片保存到手机相册(方案二) 微信小程序之点击复制文本到剪贴板 微信小程序---判断是IOS还是安卓 微信小程序分享图片给微信好友 首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用

    2023年04月20日
    浏览(16)
  • 微信小程序(二)微信小程序选择本地图片显示并预览(实现左右滑动)

    在微信小程序里面实现选择图片然后预览是一个非常普遍的功能,在我们上传图片文件的时候,都会选择本地的图片进行上传,在上传之前会查看一下自己上传的图片是否准确。所以要做到预览图片。 下面就实现一个简单的本地图片显示预览的功能~~ 1、创建页面 这里我直接

    2024年02月03日
    浏览(21)
  • 微信小程序-图片预览图

    有时候图片列表图片过小看不清图片内容,这时我们一般就希望点击图片可以放大显示进行预览,那么,接下来我们就调用微信原生API的的浏览图片程序进行对图片预览的实现。 通过微信原生API实现单张图片的浏览 wxml代码 添加对应js的点击事件,调用预览图片的API,实现图

    2024年02月08日
    浏览(19)
  • 微信小程序上传图片写法

    小程序上传图片需要用到小程序API中的wx.uploadFile()方法。以下是一个基本的示例代码: 在这个示例代码中,首先使用wx.chooseImage()方法让用户选择一张图片,然后通过wx.uploadFile()方法将选中的图片上传到指定的接口地址。在上传成功后,我们可以在success回调函数中获

    2024年02月11日
    浏览(20)
  • 微信小程序图片使用示例

    小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 1:加载本地文件夹图片 image src=\\\"/image/pig.jpg\\\" mode=\\\"aspectFill\\\" /image mnn 2:加载服务器图片 wxml: image src=\\\"{ {imageUrl}}\\\" mode=\\\"aspectFill\\\" /image js: Page({ data: { imageUrl: \\\"

    2024年02月10日
    浏览(13)
  • 微信小程序(5)——下载图片

    一、普通下载图片 实现功能:点击下载按钮,将图片保存到本地相册。 代码如下: 按照官方文档,简单这样写即可,开发测试和发布测试时通常也都能正常下载。但是偶尔会遇到报错: errMsg: \\\"saveImageToPhotosAlbum:fail auth deny\\\" 二、用户授权下载图片 需要用户授权进行保存操作

    2024年02月11日
    浏览(23)
  • 【小程序图片水印】微信小程序图片加水印功能 canvas绘图

    感觉有用的话,可以打赏一把么?一毛不嫌少,十块不嫌多 更多详细代码请关注公众号索取(备注:公众号):

    2024年04月29日
    浏览(17)
  • 微信小程序分享图片给微信好友

    1.服务器地址:先用wx.downloadFile转为本地地址,再用 wx.showShareImageMenu进行分享 2.本地地址直接用wx.showShareImageMenu进行分享 3.需要在微信公众平台对服务器地址进行配置(downloadFile合法域名)

    2024年02月09日
    浏览(16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包