miniprogram-jituan/single_row/single_row.vue

<template>
	<image v-if="props.url" @load="loaded" :style="'width:'+ headImg.w +'px;height:'+ headImg.h +'px'" :src="props.url"
		mode="scaleToFill"></image>
	<image class="col_img" :style=" item.style ? 'width:'+ item.style.w +'px;height:' + item.style.h + 'px' : ''"
		@load="v=>loadIndex(v,i, item.isRow)" :src="item.avatar" @click="()=>toPDF(i)" v-for="(item,i) in list"
		:key="i" mode="scaleToFill"></image>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from "vue";
	import config from "../../config/index.js";
	import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	onShareAppMessage(()=>{})
	onShareTimeline(()=>{})
	const info = uni.getSystemInfoSync();
	const props = defineProps({
		title: String,
		url: String,
		page: String
	})

	uni.setNavigationBarTitle({
		title: props.title
	})

	const list = ref([]);
	
	uni.request({
		url: config.base + props.page + ".json?" + Date.now(),
		success: res => {
			if (res.statusCode !== 200) return
			list.value = res.data || [];
		}
	})

	const headImg = ref({
		w: 0,
		h: 0
	})

	function loaded(v) {
		const w = info.windowWidth;
		const h = v.detail.height / v.detail.width * w;
		headImg.value = {
			w,
			h
		}
	}


	function loadIndex(v, i, isRow) {
		const oW = isRow ? info.windowWidth : info.windowWidth / 2;
		const w = oW - 8;
		const h = v.detail.height / v.detail.width * w;
		list.value[i].style = {
			w,
			h
		};
	}

	function toPDF(i) {
		uni.navigateTo({
			url: "/pages/detail/detail?index=" + i + "&page=" + props.page
		})

	}
</script>

<style lang="scss">
	.col_img {
		display: inline-block;
		margin: 4px 0 0 4px;
		border-radius: 7px;
	}
</style>