yicangzongtai_app_240321/template/SlyZone/SlyZone.vue

<template>
	<view class="zone-box" :style="$getStyle(styles.boxStyle)">
		<view id="zone-box" :style="{'gap':  attrs.gap + 'rpx'}">
			<template v-for="(item , index) in attrs.quantity">
				<view class="zone-item" :style="{'width':zoneItemWidth,
					...$getStyle(styles.goodsItem) }">
					<view class="image-box">
						<image :style="$getStyle(styles.goodsImage)" :src="img" :mode="attrs.mode"></image>
					</view>
				</view>
			</template>
		</view>

	</view>
</template>

<script>
	import Mixin from "../Mixin";
	export default {
		name: 'SlyZone',
		mixins: [Mixin],
		data() {
			return {
				zoneItemWidth: 0,
				img: 'http://songhe-cdn.oss-cn-shenzhen.aliyuncs.com/songhe/20230627/ba9db0f24f1341358d94535314ad6227.png'
			}
		},
		methods: {

			getWidth(attrs) {
				const {
					rowNum,
					gap
				} = attrs;
				let n = 0
				this.$nextTick(() => {
					const query = uni.createSelectorQuery();
					query.select('#zone-box').fields({
						//指定要获取的属性，这里设置为size: true表示要获取尺寸信息。
						size: true,
						//在回调函数(res) => {...}中处理查询结果。回调函数会接收一个res参数，其中包含了查询的结果信息。
					}, (res) => {
						// 在回调函数中，通过res.width和res.height获取到查询元素的宽度和高度。
						if (res) {
							const width = res.width;
							const height = res.height;
							const gap_rpx = uni.upx2px(gap)
							if (rowNum) {
								n = (width - ((rowNum - 1) * gap_rpx)) / rowNum
							}
						}
						this.zoneItemWidth = n ? `${n}px` : `100%`;
					}).exec();
				})
			}


		},
		watch: {
			attrs: {
				handler() {
					this.getWidth(this.attrs)
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zone-box {
		width: 100%;

		#zone-box {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: stretch;
		}

		.zone-item {
			// flex: 1;
			flex-shrink: 0;
			overflow: hidden;

			.image-box {
				width: 100%;
				line-height: 0;

				image {
					width: 100%;
				}
			}

		}
	}
</style>