小程序多图片组合

[子组件 index.js](#子组件 index.js)

[子组件 index.wxml](#子组件 index.wxml)

[子组件 index.wxss](#子组件 index.wxss)

子组件：preview-image

子组件 index.js

javascript 复制代码

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

html 复制代码

<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

css 复制代码

.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：

html 复制代码

 <preview-image model:preview-data="{{limagePreviewArn}}"></preview-image>

js：

javascript 复制代码

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