微信小程序开发笔记：轮播图

轮播图需要设置的样式

由于小程序中 swiper 和 image 组件的默认样式，轮播图需要进行自定义设置才能正常显示：

1. 设置 swiper 的高度
2. 设置 image 的宽度和高度

<swiper :indicator-dots="true" :autoplay="true" class="carousel">
  <swiper-item>
    <image src="../../static/carousel/spiderman.png" class="carousel-image"></image>
  </swiper-item>
  <swiper-item>
    <image src="../../static/carousel/batmanvssuperman.png" class="carousel-image"></image>
  </swiper-item>
</swiper>

.carousel {
  height: 440rpx;
}
.carousel-image{
  width: 100%;
  height: 440rpx;
}

swiper 和 image 组件的用户代理样式（user agent stylesheet）

* {
  margin: 0;
}
swiper {
  display: block;
  height: 150px;
}
swiper-item {
  display: block;
  overflow: hidden;
  will-change: transform;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translate(0%, 0px) translateZ(0px);
}
image {
  width: 320px;
  height: 240px;
  display: inline-block;
  overflow: hidden;
}