uniapp 仿微信朋友圈,微博晒图 图片自适应排版
作者:互联网
export default { data() { return { imgList: [ '../../static/bac1.jpg', '../../static/bac1.jpg' ] } }, onl oad() { }, 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>
标签:uniapp,res,晒图,else,width,num,朋友圈,imgheight,margin 来源: https://www.cnblogs.com/plBlog/p/13844835.html