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>