uniapp 仿微信朋友圈，微博晒图 图片自适应排版

    export default {
        data() {
            return {
                imgList: [
                    '../../static/bac1.jpg',
                    '../../static/bac1.jpg'
                ]
            }
        },
        onLoad() {

        },
        components: {
            imgBox
        },
        methods: {
        }
    }

在 template 中使用组件

复制代码     <img-box :imgList='imgList' :num='imgList.length'></img-box>

参数说明

参数名	类型	说明
imgList	Array	图片数组
num	Number	图片数量，即数组的长度

注意

暂时不支持在nvue页面中使用

 

组件代码

<template>
    <view class="myimgDV">
        <view v-if="imgPicList.length>0" class='receiveimage flex justify'>
            <block v-for="(item,ind) in imgPicList" :key="ind">
                <image class="imgitem" :style="{width:imgwidth,height:imgheight}" :class="imgboxtype==0?'onepic':imgboxtype==1?'doublepic':imgboxtype==2?'triplepic':''"
                 :src="item" :mode="imgboxtype==0?'widthFix':imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click="previewpic(item,imgPicList)"></image>
                <!-- {width:(imgboxtype==0?'':imgwidth),height:(imgboxtype==0?'':imgwidth),padding:(imgboxtype==0?'':imgpad)} -->
            </block>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgPicList: [],
                imgboxtype: 0,
                imgwidth: 0,
                imgpad: 0,
                imgheight: ''
            }
        },
        props: {
            imgList: {
                type: Array
            },
            num: {
                type: Number,
                default: 0
            },
            pad: {
                type: Number,
                default: 0
            }
        },
        methods: {
            // 图片预览
            previewpic(cind, clist) {
                console.log(cind, clist);
                uni.previewImage({
                    urls: clist,
                    current: cind,
                    indicator: 'default'
                });
            },
            getheight() {
                let that = this;
                const query = uni.createSelectorQuery().in(that)
                query.select('.imgitem').boundingClientRect()
                query.exec(function(res) {
                    console.log(res[0].width)
                    if (that.num == 1) {
                        that.imgheight = '100%';
                    } else if (that.num == 2 || that.num == 4) {
                        that.imgheight = (res[0].width).toFixed(2) + 'px';
                    } else {
                        that.imgheight = (res[0].width).toFixed(2) + 'px';
                    }
                })

                // const query = uni.createSelectorQuery().in(this).select('.imgitem');
                // uni.createSelectorQuery().select('.imgitem').boundingClientRect(res => {
                //     console.log('reac', res)
                //     if (this.num == 1) {
                //         this.imgheight = '100%';
                //     } else if (this.num == 2 || this.num == 4) {
                //         this.imgheight = (res.width).toFixed(2) + 'px';
                //     } else {
                //         this.imgheight = (res.width).toFixed(2) + 'px';
                //     }
                // }).exec()
            }
        },
        mounted() {
            // let this = this;
            this.imgPicList = this.imgList;
            if (this.num == 1) {
                this.imgboxtype = 0;
                this.imgwidth = 100 + '%';
            } else if (this.num == 2 || this.num == 4) {
                this.imgboxtype = 1;
                this.imgwidth = 49 + '%';
            } else if (this.num == 3 || this.num > 4) {
                this.imgboxtype = 2;
                this.imgwidth = 32 + '%';
            }
            this.$nextTick(function() {
                this.getheight();
            })
        }
    }
</script>

<style lang="scss">
    .myimgDV {
        .flex {
            display: flex;
        }
        .justify {
            justify-content: space-between;
        }
        .receiveimage {
            margin-top: 28rpx;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .onepic {
                width: 100%;
                // height: 188rpx;
                // height: auto;
                margin-bottom: 28rpx;
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
            .doublepic {
                // width: 340rpx;
                // height: 340rpx;
                margin-right: 12rpx;
                margin-bottom: 12rpx;
                &:nth-child(2n) {
                    margin-right: 0;
                }
            }
            .triplepic {
                // width: 222rpx;
                // height: 222rpx;
                margin-right: 12rpx;
                margin-bottom: 12rpx;
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }
    }
</style>