一个网站不兼容ie怎么做,做电影网站放抢先版,企业管理咨询网站,亿唐网不做网站做品牌考试题UI效果图#xff1a; 实现思路#xff1a; 循环图片数组#xff0c;只展示几张宽度就为几张图片边距的宽度#xff0c;剩下的图片直接堆叠展示
点击预览的时候传入当前的下标#xff0c;如果是点击堆叠的话#xff0c;下标从堆叠数量开始计算
template…UI效果图 实现思路 循环图片数组只展示几张宽度就为几张图片边距的宽度剩下的图片直接堆叠展示
点击预览的时候传入当前的下标如果是点击堆叠的话下标从堆叠数量开始计算
template!-- 查看图片展示 --view classimage pos-re :styleimageStyleu-image :widthwidth :heightheight :srcformatImgUrl(item) border-radius8 :styleimgStyle classimg v-for(item, index) in imagesList clickpreviewImage(0, index,item)/u-imageview classmask pos-ab :stylemaskStyle v-ifimagesList.length 4 clickpreviewImage(1, 3)u-icon nameplus size28 color#FFFFFF/u-icon{{imagesList.length1 - imgNum }}/view/view
/templatescript
export default {name:showImage,props:{imagesList: {type: Array,default: () {return []},},width: {type: [String, Number],default: 104,},height: {type: [String, Number],default: 104,},// 图片之间的右边距marginRight: {type: [String, Number],default: 10,},// 保留照片数imgNum: {type: [String, Number],default: 4,}},data() {return {baseFileUrl: process.uniEnv.BASE_FILEURL,imageStyle: {width: 0rpx,overflow: hidden},imgStyle: {margin-right: 0rpx,},maskStyle: {width: 0rpx,height: 0rpx},}},onLoad() {},watch: {imagesList:{handler(nV,oV){this.imgStyle.marginRight this.marginRight rpx;this.imageStyle.width (this.width * this.imgNum ) (this.marginRight * this.imgNum-1) rpx;this.maskStyle.width this.width rpx;this.maskStyle.height this.height rpx;this.maskStyle.lineHeight this.height rpx;this.maskStyle.right 0 rpx;},immediate: true,deep: true}},methods: {formatImgUrl(img) {if (!img || img /static/images/image_noData.png) {return /static/images/image_noData.png}let imgs img.split(,);return this.baseFileUrl imgs[0]},previewImage(num, index, item) {let arr [];if(this.imagesList.length){this.imagesList.forEach(item {arr.push(this.baseFileUrl item )})}if(!num) {uni.previewImage({current:index,urls: arr})}else{uni.previewImage({current: 3,urls: arr})}}}
}
/scriptstyle langscss scoped.image{display: flex;.img{flex-shrink: 0;}.mask{text-align: center;background: #1F2533;border-radius: 8rpx;opacity: 0.9;font-size: 28rpx;color: #FFFFFF;}}
/style
成品展示
