uni-app image组件学习

src

图片资源地址

mode

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

mode有效值：

aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

<template>
	<view>
		<swiper indicator-dots indicator-color="rgba(255, 255, 255, .3)" 
		indicator-active-color="#ffffff" circular="true" 
		autoplay="true" interval="1000">
		<swiper-item><image src="../../static/微信图片_20240724134918(1).jpg" mode="aspectFill" class="pic5"></image></swiper-item>
		<swiper-item><image src="../../static/微信图片_20240724134925.jpg" mode="aspectFill" class="pic2"></image></swiper-item>
		<swiper-item><image src="../../static/微信图片_20240724134931.jpg" mode="aspectFill" class="pic3"></image></swiper-item>
			
		</swiper>
	</view>
	
	<view>
		<image src="../../static/logo.png" mode="aspectFit" class="pic1"></image>
		<image src="../../static/微信图片_20240724134925.jpg" mode="aspectFill" class="pic2"></image>
		<image src="../../static/微信图片_20240724134931.jpg" mode="aspectFit" class="pic3"></image>
		<image src="../../static/微信图片_20240724134937.jpg" mode="aspectFit" class="pic4"></image>
		<image src="../../static/微信图片_20240724134918(1).jpg" mode="aspectFit" class="pic5"></image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>



<style lang="scss">
	swiper{
		width: 100vw;//全屏宽度；50vh:屏幕高度一半
		height: 200px;
		border: 1px solid green;
	}
	
	swiper-item{
		width: 100%;
		height: 100%;
		background: pink;
		image{
			width: 100%;
			height: 100%;
		}
	}//滑动子模块，此时子模块的颜色是一样的，如果要实现每个模块的颜色不一样，则需要控制器
	
	swiper-item:nth-last-child(2n){
		background:orange;
	}//比例选择起，2的倍数的子模块是橘色
	
	.pic1{
		width: 150px;
		height: 150px;
		
	}
	
</style>