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中