微信小程序开发02-设置自动滚动轮播图片

设置自动滚动图片首先在xx.xml中：

<swiper class="banner" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay interval="3000" circular>
  <swiper-item>
    <image src="../../image/h14.jpg"  mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="../../image/h2.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="../../image/h3.jpg" mode="widthFix"></image>
  </swiper-item>
</swiper>

在.wxss中对其进行样式渲染（具体大小等，可以对参数稍做更改）：

.banner{height: 400rpx; border: red 1px solid;}
.banner image{height: 400rpx; width: 100%;}

.srcOut{display: flex; flex-wrap: nowrap; text-align: center;}

.srcBox{ width: 100px; height: 100px; background-color: gold; margin: 2px; flex:0 0 100px}
.srcOut .txt{font-size: 35rpx; color: #FF69B4; background-color: #FFF8DC;}

.srcOut2{ height: 100%;
}
.srcBox2{width: 100%; height: 100px; background-color: hotpink; margin-bottom: 1px;}


.out{padding: 30rpx;box-sizing: border-box  ;}
.row{display: flex;height: 150rpx;margin-bottom: 20rpx;}
.pic{flex: 2;}
.pic image{width: 100%; height: 100%;}
.text{flex: 8; border-bottom: solid 1px #eee;padding-left: 10rpx; display: flex; flex-direction: column;justify-content: space-between;}
.text .title{font-size: 38rpx;}
.text .time{ color: #999;}

.footer{padding: 40rpx 0; background: #f2f2f2; text-align: center;}
.footer .pic{width: 60rpx;}
.footer .text{font-size: 25rpx; color: #999;}

功能描述

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

属性说明

	属性	类型	默认值	必填	说明	最低版本
	indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
	indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
	indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
	autoplay	boolean	false	否	是否自动切换	1.0.0
	current	number	0	否	当前所在滑块的 index	1.0.0
	interval	number	5000	否	自动切换时间间隔	1.0.0
	duration	number	500	否	滑动动画时长	1.0.0
	circular	boolean	false	否	是否采用衔接滑动	1.0.0
	vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
	previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
	next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
	snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	2.12.1
	display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
	easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5