uni-app实现banner轮播图

uni-app实现banner轮播图

话说：这uni-app是真的膈应人，不过兵来将挡，水来土掩。看我怎么降服这个妖孽。

首先使用swiper组件实现

一个大写的例子

在 body中

"page-section-spacing">
	"swiper" 
		indicator-dots="true" 
		autoplay="true" 
		interval="5000" 
		duration="1500"	>
		"(item , index) in homeSlide" :key="index">
			<image :src="item.img" mode="aspectFill">
		
	

在script中

定义一个数组，用于接收服务器返回的 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;
		}
	});
},

最后就是在css中

.swiper{
	height: 400upx;
}

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

这样一个轮播图就此完成。