微信小程序-swiper组件 轮播图

在wxml中加入swiper组件

<view>
	<swiper>
      <swiper-item><image src="../../images/post/1.png"></image></swiper-item>
      <swiper-item><image src="../../images/post/2.png"></image></swiper-item>
      <swiper-item><image src="../../images/post/3.png"></image></swiper-item>
	</swiper>
</view>

最外层的view作为容器，在view内部加入一个swiper组件。在swiper组件只能由多个swiper-item构成，swiper-item中是可以加任意元素的。

属性：
1.indicator-dos 显示面板指示点
2.autoplay 自动播放
3.interval 时间间隔 ms
举例：

 <swiper indicator-dots autoplay interval="4000" circular vertical="{{false}}">
 
 <swiper>

在wxss中设置swiper组件样式：

组件大小和图片大小要一致，否则显示出来的比例就会不协调。

swiper{
  width: 100%;
  height: 400rpx;
}
swiper image{
  width: 100%;
  height: 400rpx;
}

若要垂直居中
设置最外层的view容器为flex

.post-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

图片消失的问题

使用flex布局时，希望垂直居中，设定align-items: center;发现轮播图消失了，可能是因为轮播图父元素宽度没有设置，所以swiper组件没有宽度。
width: 100%;改为 width: 600rpx;
结果：

swiper{
  width: 600rpx;
  height: 400rpx;
}