微信小程序swiper

swiper

swiper-item

先看一段代码

<swiper style="width:100%;height:500rpx">
  <swiper-item style="background-color:#ff6900">
    <image src="/images/wx.png" ></image>
  </swiper-item>
</swiper>

我们设置了swiper的宽高，swiper-item确实自动设置了swiper大小的100%，但是swiper-item中的image并没有被设置大小。

所以必须给image也设置宽高：

<swiper style="width:100%;height:500rpx">
  <swiper-item style="background-color:#ff6900">
    <image src="/images/wx.png" style="width:100%;height:500rpx"></image>
  </swiper-item>
</swiper>

将样式写入wxss文件中

swiper {
  width: 100%;
  height: 500rpx;
}

swiper image {
  width: 100%;
  height: 500rpx;
}

给swiper加上指示器，自动播放间隔为2秒

<swiper indicator-dots="true" autoplay="true" interval="2000">
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/wx.png"></image>
  </swiper-item>
</swiper>