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

export default {

data() {

return {

imgList: [

'../../static/bac1.jpg',

'../../static/bac1.jpg'

]

}

},

onl oad() {

},

components: {

imgBox

},

methods: {

}

}

在 template 中使用组件

复制代码

参数说明

参数名类型说明

imgList

Array

图片数组

num

Number

图片数量，即数组的长度

注意

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

组件代码

:src="item" :mode="imgboxtype==0?'widthFix':imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click="previewpic(item,imgPicList)">

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();

})

}

}

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

}

}

}

}

标签：uniapp,res,晒图,else,width,num,朋友圈,imgheight,margin

来源： https://www.cnblogs.com/plBlog/p/13844835.html