在小程序中,有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%;}}}
}