小程序22-轮播图添加图片

小程序中，如果需要渲染图片，需要使用 image 组件，常用的属性：

属性值可参考：

注意事项：

1. image 默认具有宽度和高度，宽是 320px 高是240px
2. image 组件不给 src 属性设置图片地址，也占据宽和高

详细介绍

show-menu-by-longpress和lazy-load：接收布尔值：默认为false

<view class="swiper">
  <swiper 
    autoplay
    circular
    interval="1000"
    indicator-dots
    indicator-color="#fff"
    indicator-active-color="#f3514f">
    <swiper-item>
      <image 
        src="../../assets/image/1.png" 
        mode="aspectFill" 
        show-menu-by-longpress 
        lazy-load 
      />
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

.swiper {
  swiper {
    height: 360rpx;
    background-color: skyblue;

    swiper-item {
      // & 在 Sass 中代表的是父选择器
      // swiper- item：first-child 选中第一个子元素
      image {
        width: 100%;
        height: 100%;
      }
      &:first-child {
        background-color: lightcoral;
      }
      &:last-child {
        background-color: lightgreen;
      }
    }
  }
}