uniapp轮播组件图片宽高怎么定义-猿码集

uniapp轮播组件图片宽高怎么定义

uniapp轮播组件介绍

uniapp是一款跨平台开发框架，它可以让开发者使用vue语法，开发一次代码，可以打包成多个平台的应用程序，包括H5、微信小程序、APP等多个平台。uniapp自带的轮播组件可用于展示多张图片、文字或自定义内容；而轮播组件中的图片，可以通过设置宽高来实现适当的显示效果。

uniapp轮播组件中图片的默认宽高

在使用uniapp的轮播组件时，未设置图片宽高时，图片会自适应轮播组件的宽高，并保持其原本的比例，即宽高比不变。

下面是一个轮播组件代码示例，其中未设置图片宽高：


<template>
  <view>
    <swiper :autoplay='true' :interval='5000' :duration='500'>
      <swiper-item v-for='(item,index) in list' :key='index'>
        <image :src='item.imgUrl'></image>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          imgUrl: 'https://i.loli.net/2021/07/16/NL9wVbyitQXzdTn.jpg'
        },
        {
          imgUrl: 'https://i.loli.net/2021/07/16/tBVvk5u4i1XInj2.jpg'
        },
        {
          imgUrl: 'https://i.loli.net/2021/07/16/5w2E7Zorqu9RyG1.jpg'
        },
        {
          imgUrl: 'https://i.loli.net/2021/07/16/EGQuwWyWpcznTO7.jpg'
        }
      ]
    }
  },
}
</script>

在这个示例中，轮播组件占据了整个屏幕的宽度和高度。图片的宽高会自适应轮播组件的宽高，并保持其原本的比例。

设置图片宽高

如果需要控制图片的宽高，可以使用`style`属性进行设置。

设置图片宽高的方式有以下几种。

1. 基于vw/vh单位进行设置

可以使用vw和vh单位来设置图片的宽高。这里，vw和vh分别代表视口宽度和视口高度，它们可以根据不同设备的屏幕尺寸自适应地调整图片的大小。

例如，下面代码可以让图片的宽度占据整个视口的90%：


<image :src='imgUrl' style='width: 90vw;'></image>

2. 基于rpx单位进行设置

另一种设置图片宽高的方法是使用rpx单位，它是一个相对单位，将屏幕宽度平均分为750份，1rpx等于屏幕宽度的1/750。这样，可以更精细地控制图片的宽度和高度。

例如，下面代码可以让图片的宽度为屏幕宽度的40%：


<image :src='imgUrl' style='width: 300rpx;'></image>

3. 固定宽高比进行设置

有时候，需要固定图片的宽高比，并根据轮播组件的宽度自适应高度。这种情况下，可以使用CSS中的`padding-top`属性，设置一个占位的上边距来实现等比例缩放。

例如，新增一个变量`aspectRatio`来表示图片的宽高比，代码如下：


<template>
  <view>
    <swiper :autoplay='true' :interval='5000' :duration='500'>
      <swiper-item v-for='(item,index) in list' :key='index'>
        <image :src='item.imgUrl' :style='{paddingTop: aspectRatio}'></image>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          imgUrl: 'https://i.loli.net/2021/07/16/NL9wVbyitQXzdTn.jpg'
        },
        {
          imgUrl: 'https://i.loli.net/2021/07/16/tBVvk5u4i1XInj2.jpg'
        },
        {
          imgUrl: 'https://i.loli.net/2021/07/16/5w2E7Zorqu9RyG1.jpg'
        },
        {
          imgUrl: 'https://i.loli.net/2021/07/16/EGQuwWyWpcznTO7.jpg'
        }
      ],
      aspectRatio: '56.25%' // 宽高比为16:9，即9/16 = 0.5625
    }
  },
}
</script>

在这个示例中，`aspectRatio`的值为`'56.25%'`，表示宽高比为16:9，即9/16；轮播组件会自动计算图片的高度，并根据设置的宽高比来确定高度。如果图片的宽度大于轮播组件的宽度，图片会根据宽度等比例缩小，而不会超出轮播组件的范围。

总结

在uniapp中使用轮播组件展示图片时，图片的宽高可以根据需要进行设置。可以基于vw或rpx单位来设置图片的大小，也可以使用等比例缩放的方式固定图片的宽高比，根据轮播组件的宽度自适应高度。通过灵活设置图片宽高，可以让轮播组件的展示效果更加美观、合理。

uniapp轮播组件图片宽高怎么定义