微信小程序组件之swiper介绍
在小程序中,有swiper和swiper-item组件实现轮播图。
swiper:滑块视图容器,其中只能放置swiper-item组件
swiper-item:只能放在swiper组件中,宽高自动设置为100%, 代表swiper中的每一项。
主要属性的介绍通过代码示例进行讲解:
<view class="swiper">
<swiper autoplay="true" interval="5000" indicator-dots indicator-color="#efefef" indicator-active-color="#339dff" circular="true">
<swiper-item>
<image src="../../assets/sw1.png" mode="scaleToFill"/>
</swiper-item>
<swiper-item><image src="../../assets/sw2.png" mode="scaleToFill"/>
</swiper-item>
</swiper>
</view>
swiper中的属性:
autoplay:轮播图是否自动播放;
interval:轮播图多久切换一次,单位是毫秒,例如5000表示5秒切换一次;
Indicator-dots:轮播图面板指示点是否显示;
indicator-color:默认指示点颜色;
indicator-active-color:当前图片的指示点颜色;
circular:是否采用衔接滑动。
.swiper {
swiper {
height: 360rpx;
swiper-item {
image {
width: 100%;
height: 100%;
}
}
}
}