image-large.uvue 988 字节
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1
<template>
xuty73419315's avatar
xuty73419315 已提交
2
	<scroll-view style="flex: 1;">
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
3 4 5 6 7 8 9 10 11 12
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">
				<text class="uni-title-text">大图示例</text>
			</view>
			<view class="uni-common-mt" v-for="_ in 10">
				<text class="uni-subtitle-text">width={{width}}px height={{height}}px memory={{memory}}MB</text>
				<image class="image" mode="widthFix" :src="src" @load="load"></image>
			</view>
		</view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
13
	</scroll-view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
14 15 16 17 18 19 20
</template>

<script>
	export default {
		data() {
			return {
				title: 'image-large',
21
				src: 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/img/building.jpg',
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
				width: 0,
				height: 0,
				memory: 0
			}
		},
		methods: {
			load(event : ImageLoadEvent) {
				this.width = event.detail.width;
				this.height = event.detail.height;
				this.memory = Math.round(this.width * this.height * 4 / 1024 / 1024 * 100) / 100;
			}
		}
	}
</script>

<style>
	.image {
		width: 100%;
	}
41
</style>