微信小程序轮播图

1. 微信小程序自带写好的组件<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>

2. 图片可以在<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;
}