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>