先看一段代码
<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>