- 微信小程序自带写好的组件<swiper>里面只可以放<swiper-item>组件
<swiper>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
</swiper>
<swiper>的属性
- indicator-dots="true" 是否需要点
- autoplay="true" 是否自动播放
- interval="2000" 每隔多少秒换一次图
- circular="true" 是否采用衔接滑动
- indicator-color="#eee" 未选中时点的颜色
- indicator-active-color="#fff" 选中时点的颜色
<swiper indicator-dots="true" autoplay="true" interval="2000" circular="true" indicator-color="#eee" indicator-active-color="#fff">
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
</swiper>
- 图片可以在<swiper-item>标签中添加<image src="">
<swiper indicator-dots="true" autoplay="true" interval="2000" circular="true" indicator-color="#eee" indicator-active-color="#fff">
<swiper-item>
<image src="http://p1.music.126.net/_X-DMNhZ9B-Qoj_eDik8sg==/109951164641253240.jpg?imageView&quality=89"></image>
</swiper-item>
<swiper-item>
<image src="http://p1.music.126.net/t3KoaJhUpx1N8Y8-zaWr6g==/109951164641138155.jpg?imageView&quality=89"></image>
</swiper-item>
<swiper-item>
<image src="http://p1.music.126.net/EjTT-BGYvgwkontrA-6H7g==/109951164639066699.jpg?imageView&quality=89"></image>
</swiper-item>
</swiper>
wxss样式
swiper,swiper image {
width: 100vw;
height: 400rpx;
}
