uni-app Banner ( 轮播图 ) 实现

例子：

从上面的例子可以看出swiper组件有一些属性，更多属性文档参考 swiper 组件

indicator-dots 表示是否显示指示器，默认是 false
autoplay 表示是否自动轮播，默认是 false
interval 表示自动切换的时间间隔，默认是 5000ms
duration 表示滑动动画时长，默认是 500ms
Tip: 这里的高度是通过class="swiper" 去设置的，例如我想设置轮播图的高度为 400upx

.swiper{
	height: 400upx;
}

// swiper-item 里面的图片高度
swiper-item image{
	width: 100%;
	height: 400upx;
}

布局搞定之后就开始填充数据了，这里的数据是从服务器请求返回的结果

伪代码如下：

定义一个数组，用于接收服务器返回的 banner 数组

data() {
	return {
		homeSlide: [], // 定义值接收轮播图数据
	}
},

在 onLoad 生命周期中 获取服务器接口，返回成功后将结果绑定到 布局中
getHomeSlideFunc() {
	var _self = this;
	uni.request({
		url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',
		success: (res) => {
			_self.homeSlide = res.data.post;
		}
	});
},