image-mode.uvue 2.7 KB
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1
<template>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
2
	<scroll-view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
3 4 5 6 7 8 9 10 11 12 13 14
		<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 v-for="(item,index) in data" :key="index">
				<text class="uni-subtitle-text">{{item.mode}}: {{item.description}}</text>
				<view class="uni-center" style="background:#FFFFFF;">
					<image class="image" :mode="item.mode" src="/static/shuijiao.jpg"></image>
				</view>
			</view>
		</view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
15
	</scroll-view>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
16 17 18 19 20 21 22
</template>

<script>
	export default {
		data() {
			return {
				title: 'image-mode',
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
23 24
				data: [
					{
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
						mode: 'scaleToFill',
						description: '不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素'
					},
					{
						mode: 'aspectFit',
						description: '保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来'
					},
					{
						mode: 'aspectFill',
						description: '保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取'
					},
					{
						mode: 'top',
						description: '不缩放图片,只显示图片的顶部区域'
					},
					{
						mode: 'bottom',
						description: '不缩放图片,只显示图片的底部区域'
					},
					{
						mode: 'center',
						description: '不缩放图片,只显示图片的中间区域'
					},
					{
						mode: 'left',
						description: '不缩放图片,只显示图片的左边区域'
					},
					{
						mode: 'right',
						description: '不缩放图片,只显示图片的右边区域'
					},
					{
						mode: 'top left',
						description: '不缩放图片,只显示图片的左上边区域'
					},
					{
						mode: 'top right',
						description: '不缩放图片,只显示图片的右上边区域'
					},
					{
						mode: 'bottom left',
						description: '不缩放图片,只显示图片的左下边区域'
					},
					{
						mode: 'bottom right',
						description: '不缩放图片,只显示图片的右下边区域'
					},
					{
						mode: 'widthFix',
						description: '宽度不变,高度自动变化,保持原图宽高比不变'
					},
					{
						mode: 'heightFix',
						description: '高度不变,宽度自动变化,保持原图宽高比不变'
					}
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
80
				] as Array<ImageMode>
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
81 82 83 84 85
			}
		}
	}

	class ImageMode {
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
86 87
		mode : string;
		description : string;
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
88

DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
89
		constructor(mode : string, description : string) {
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
90 91 92 93 94 95 96 97 98 99 100 101 102 103
			this.mode = mode;
			this.description = description;
		}
	}
</script>

<style>
	.image {
		margin: 40rpx auto;
		width: 200rpx;
		height: 200rpx;
		background-color: #eeeeee;
	}
</style>