微信小程序实现简单的轮播图效果
1.swiper视图容器组件
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
swiper是轮播图的外层容器，所以使用轮播图就必须使用到swiper标签。
swiper相关属性：类型默认值必填说明最低版本
indicator-dotsbooleanfalse否是否显示面板指示点
indicator-colorcolorrgba(0,0,0,3）否指示点颜色
indicator-active-colorcolor#000000否当前选中的指示点颜色
autoplaybooleanfalse否是否自动切换
currentnumber0否当前所在滑块的 index
intervalnumber5000否自动切换时间间隔
durationnumber500否滑动动画时长
circularbooleanfalse否是否采用衔接滑动
verticalbooleanfalse否滑动方向是否为纵向
previous-marginstring"0px"否前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-marginstring"0px"否后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
snap-to-edgebooleanfalse否当 swiper-item 的个数大于等于2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素
display-multiple-itemsnumber1否同时显示的滑块数量
easing-functionstring"default"否指定 swiper 切换缓动动画类型
bindchangeeventhandle否current 改变时会触发 change 事件，event.detail = {current, source}
bindtransitioneventhandle否swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinisheventhandle否动画结束时会触发 animationfinish 事件，event.detail 同上
存在默认样式：
width:100%
height:360rpx，高度看图片自己调试就可以
2.swiper-item 轮播项
只能放置在swiper组件中。表示每一个轮播项。
代码实现wxml文件
<swiper class="hei" indicator-dots indicator-color="#ffffff" indicator-active-color="#0066FF" autoplay circular>
<swiper-item>
<navigator url="//这里输入小程序导航位置">
<image class="boxM" src="//轮播图图片位置" mode="" />
</navigator>
</swiper-item>
</swiper>
编译效果
wxss文件：
.boxM {
width: 100%; //图片宽度
height: 100%;}//高度
如果不使用%号图片会变形，如果你自己调试可以使用rpx
这些内容我在学习中收获的一点小总结，如有错误的地方，欢迎读者朋友提示评论和批评指正。
