微信小程序中的轮播图

微信小程序中的轮播图感觉是最最最最简单的了，靠swiper这个组件就可以实现。
有横屏轮播图和竖屏轮播图，到时候用到了，可以直接复制代码使用

1.横屏轮播图

wxml代码：

<swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)"
 indicator-active-color="#fff" indicator-dots circular autoplay>
 <swiper-item>
 <image src="/upload/轮播5.png"></image>
 </swiper-item>
 <swiper-item>
 <image src="/upload/轮播.png"></image>
 </swiper-item>
 <swiper-item>
 <image src="/upload/轮播2.jpg"></image>
 </swiper-item>
 </swiper>

记得更改图片路径

wxss这个里面代码就很少了

.content-info-slide{
  height:302rpx;
  margin-bottom: 20px;

}
.content-info-slide image{
  width: 100%;
  height: 100%;
}

如果不设置宽高的话他有一个默认的宽高，忘了多少了。。。

2竖屏轮播图：

与横屏相比仅仅是多了一个vertical=“true”，和改变了图片的高度
vertical="true"是那个小黑点在右侧显示

wxml：这里的图片通过渲染的方式实现的，图片参考横屏轮播图

<scroll-view class="content-info" scroll-y="true" >
 <swiper class="content-info-slide"  indicator-active-color="black" indicator-dots circular autoplay vertical="true" interval="3500" duration="1000">
 <swiper-item wx:for="{{img}}">
 <image src="{{item.src}}"></image>
 </swiper-item>
 </swiper>
 </scroll-view>

wxss：

.content-info-slide{
  height: 1200rpx;
}
image{
  width: 100%;
  height: 100%;
}