HBuilder X---轮播图

image属性说明：

src：要引入图片资源的地址

mode:图片裁剪、缩放的模式,默认为scaleToFill

mode有效值：

scaleToFill:不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit:保持纵横比缩放图片，使图片的长边能完全显示出来

aspectFill:保持纵横比缩放图片，只保证图片的短边能完全显示出来

widthFix：宽度不变，高度自动变化，保持原图宽高比不变

heightFix：高度不变，宽度自动变化，保持原图宽高比不变，App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
 

<template>
	<!--
	indicator-dots  是否显示指示点
	circular  衔接滑动
	autoplay  自动切换
	interval  自动切换时间（1000表示一秒）
	vertical  滑动方向是否为纵向 （要橫向滑动不要加）
	-->
		<swiper indicator-dots  circular="true" autoplay interval="2000" vertical>
			<swiper-item>
				<!--mode是图片裁剪，缩放模式-->
				<image mode="scaleToFill" src="../../static/2.jpg" />
				</swiper-item>
			<swiper-item>
				<image mode="scaleToFill" src="../../static/3.jpg"/>
				</swiper-item>
			<swiper-item>
				<image mode="scaleToFill" src="../../static/4.jpg"/>
				</swiper-item>
			<swiper-item>
				<image mode="scaleToFill" src="../../static/5.jpg"/>
				</swiper-item>
			<swiper-item>
				<image mode="scaleToFill" src="../../static/6.jpg"/>
				</swiper-item>
		</swiper>
</template>
<script setup>
</script>
<style lang="scss">
	//自定义图片大小
		swiper{
			width: 100vw;
			height: 50vw;
		}
		image{
			width: 100vw;
			height: 50vw;
		}
</style>

 注：swiper-item是swiper的唯一合法子组件，每个swiper-item代表一个滑块，图片必须包含在swiper-item中