tijiao
This commit is contained in:
245
pages/articleList/PrecisionImageGrid.vue
Normal file
245
pages/articleList/PrecisionImageGrid.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view class="penBoxListImages com_Img_box">
|
||||
<!-- tupian我设置的是数字暂无后端数据做循环啊，可替换为数组的长度 -->
|
||||
<block v-for="(item, index) in imageList" wx:key="index">
|
||||
<image :class="`img_list
|
||||
${imageList.length == 1 ? 'com_Img_box_images1':''}
|
||||
${imageList.length == 2 ? 'com_Img_box_images2':''}
|
||||
${imageList.length == 3 ? 'com_Img_box_images3':''}
|
||||
${imageList.length == 4 ? 'com_Img_box_images4':''}
|
||||
${imageList.length == 5 ? 'com_Img_box_images5':''}
|
||||
${imageList.length == 6 ? 'com_Img_box_images6':''}
|
||||
${imageList.length == 7 ? 'com_Img_box_images7':''}
|
||||
${imageList.length == 8 ? 'com_Img_box_images8':''}
|
||||
${imageList.length == 9 ? 'com_Img_box_images9':''}`"
|
||||
:src="item" mode="aspectFill" />
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// 图片地址列表
|
||||
imageList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
// 网格间距（rpx）
|
||||
gap: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
// 容器宽度占父元素比例
|
||||
containerRatio: {
|
||||
type: Number,
|
||||
default: 1 // 100%宽度
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 根据索引和总数计算每个图片的样式
|
||||
getItemStyle(index, total) {
|
||||
// 计算基础尺寸和间隙
|
||||
const containerWidth = `calc(100% * ${this.containerRatio})`;
|
||||
let width, height, gridTemplateColumns;
|
||||
|
||||
// 根据图片数量设置不同排列规则
|
||||
switch(total) {
|
||||
case 1:
|
||||
// 1张图：占满容器
|
||||
width = '100%';
|
||||
height = '400rpx';
|
||||
break;
|
||||
case 2:
|
||||
// 2张图：并排
|
||||
width = `calc(50% - ${this.gap/2}rpx)`;
|
||||
height = '250rpx';
|
||||
break;
|
||||
case 3:
|
||||
// 3张图：1行2张，1行1张
|
||||
if (index === 0) {
|
||||
width = '100%';
|
||||
height = '250rpx';
|
||||
} else {
|
||||
width = `calc(50% - ${this.gap/2}rpx)`;
|
||||
height = '150rpx';
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
// 4张图：2x2网格
|
||||
width = `calc(50% - ${this.gap/2}rpx)`;
|
||||
height = '200rpx';
|
||||
break;
|
||||
default:
|
||||
// 5张及以上：3列网格
|
||||
width = `calc(33.333% - ${this.gap*2/3}rpx)`;
|
||||
height = '180rpx';
|
||||
}
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
// 处理右边距（最后一列不加右边距）
|
||||
marginRight: this.shouldAddMarginRight(index, total) ? `${this.gap}rpx` : '0',
|
||||
// 处理下边距（最后一行不加下边距）
|
||||
marginBottom: this.shouldAddMarginBottom(index, total) ? `${this.gap}rpx` : '0'
|
||||
};
|
||||
},
|
||||
|
||||
// 判断是否需要添加右边距
|
||||
shouldAddMarginRight(index, total) {
|
||||
if (total <= 2) return index === 0;
|
||||
if (total === 3) return index === 1;
|
||||
if (total === 4) return index % 2 === 0;
|
||||
return (index + 1) % 3 !== 0; // 3列布局最后一列不加右边距
|
||||
},
|
||||
|
||||
// 判断是否需要添加下边距
|
||||
shouldAddMarginBottom(index, total) {
|
||||
if (total <= 3) return index < total - 2;
|
||||
if (total === 4) return index < 2;
|
||||
// 3列布局最后一行不加下边距
|
||||
const rows = Math.ceil(total / 3);
|
||||
const currentRow = Math.floor(index / 3) + 1;
|
||||
return currentRow < rows;
|
||||
},
|
||||
|
||||
// 预览图片
|
||||
previewImage(index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.imageList,
|
||||
loop: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.com_Img_box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.com_Img_box_images1:nth-child(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.com_Img_box_images2 {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
.com_Img_box_images2:nth-child(n) {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.com_Img_box_images3 {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
}
|
||||
.com_Img_box_images3:nth-child(2){
|
||||
width: 49%;
|
||||
height: 49%;
|
||||
}
|
||||
.com_Img_box_images3:nth-child(3) {
|
||||
width: 49%;
|
||||
height: 49%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.com_Img_box_images4 {
|
||||
width: 49%;
|
||||
height: 49%;
|
||||
}
|
||||
.com_Img_box_images5 {
|
||||
width: 69%;
|
||||
height: 69%;
|
||||
}
|
||||
.com_Img_box_images5:nth-child(2) {
|
||||
width: 28%;
|
||||
height: 69%;
|
||||
}
|
||||
.com_Img_box_images5:nth-child(n+3):nth-child(-n+5) {
|
||||
width: 32%;
|
||||
height: 29%;
|
||||
}
|
||||
.com_Img_box_images6 {
|
||||
width: 69%;
|
||||
height: 69%;
|
||||
}
|
||||
.com_Img_box_images6:nth-child(2) {
|
||||
width: 29%;
|
||||
height: 34%;
|
||||
}
|
||||
.com_Img_box_images6:nth-child(3) {
|
||||
width: 29%;
|
||||
height: 34%;
|
||||
position: absolute;
|
||||
bottom: 29%;
|
||||
right: 0;
|
||||
}
|
||||
.com_Img_box_images6:nth-child(n+4):nth-child(-n+5) {
|
||||
width: 34%;
|
||||
height: 29%;
|
||||
}
|
||||
.com_Img_box_images6:nth-child(6) {
|
||||
width: 29%;
|
||||
height: 29%;
|
||||
}
|
||||
.com_Img_box_images7 {
|
||||
width: 32%;
|
||||
height: 69%;
|
||||
}
|
||||
.com_Img_box_images7:nth-child(3) {
|
||||
width: 32%;
|
||||
height: 34%;
|
||||
}
|
||||
.com_Img_box_images7:nth-child(4) {
|
||||
width: 32%;
|
||||
height: 34%;
|
||||
position: absolute;
|
||||
bottom: 29%;
|
||||
right: 0;
|
||||
}
|
||||
.com_Img_box_images7:nth-child(n+5):nth-child(-n+7) {
|
||||
width: 32%;
|
||||
height: 29%;
|
||||
}
|
||||
.com_Img_box_images8 {
|
||||
width: 32%;
|
||||
height: 69%;
|
||||
}
|
||||
.com_Img_box_images8:nth-child(n+2):nth-child(-n+3) {
|
||||
width: 32%;
|
||||
height: 34%;
|
||||
}
|
||||
.com_Img_box_images8:nth-child(4) {
|
||||
width: 32%;
|
||||
height: 34%;
|
||||
position: absolute;
|
||||
right:33%;
|
||||
bottom: 29%;
|
||||
}
|
||||
.com_Img_box_images8:nth-child(5) {
|
||||
width: 32%;
|
||||
height: 34%;
|
||||
position: absolute;
|
||||
right:0;
|
||||
bottom: 29%;
|
||||
}
|
||||
.com_Img_box_images8:nth-child(n+6):nth-child(-n+8) {
|
||||
width: 32%;
|
||||
height: 29%;
|
||||
}
|
||||
.com_Img_box_images9 {
|
||||
width: 32%;
|
||||
height: 32%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user