10.2.1 广告轮播 程序开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

10.2 企业站首页

企业站项目首页主要包括下面几个模块：广告图、公司简介、最新产品、最新案例、最新资讯。首页效果如图10-1。

10.2.1 广告轮播

首页轮播图的最终效果如图10-2。

开发分析

第1步：查看和测试接口的内容。
第2步：在程序的data代码块初始化变量imgs，用于存放轮播图片数据。
第3步：在程序的methods代码块中自定义方法GetBanner，用于获取接口的图片数据。
第4步：在程序的mounted代码块中调用方法GetBanner，获取数据。
第5步：改造布局代码，将获取的轮播图片数组信息循环显示出来。

第1步：查看和测试接口
地址

http://qiyephp.yaoyiwangluo.com/h5/wx_api_getbanner.php

返回值类型

数组，每个项目是一个图片地址

返回值

[
"http://qiyephp.yaoyiwangluo.com/tupian/ban1.jpg",
"http://qiyephp.yaoyiwangluo.com/tupian/ban2.jpg",
"http://qiyephp.yaoyiwangluo.com/tupian/ban3.jpg"
]

第2,3,4步：获取数据

<script>
export default {
	data() {
		return {
			imgs:[],   //数组，存放轮播图片
		}
	},
	onLoad() {
	},
	mounted:function(){
		this.GetBanner(); //调用获取轮播图的方法
	},
	methods: {
	//自定义方法：获取轮播图
	GetBanner:function(){
	uni.request({
		//http://qiyephp.yaoyiwangluo.com/h5/wx_api_getbanner.php
		//使用全局变量来访问接口
		url:this.$WebURL.WebUrl.phpweb + "/h5/wx_api_getbanner.php",
		//success:function(res) 不能获取
			success:(res) =>{
			this.imgs = res.data;
			//console.log("返回简介数据："+this.jianjie)
		}
	})
	}, //获取轮播图 结束				
	}
}
</script>

第5步：显示数据

<!--首页-轮播广告图--> 
<view class='ad01'>
  <!--indicator-dots 是否显示面板指示点-->
  <!--vertical 滑动方向是否为纵向-->
  <!--autoplay 是否自动切换-->
  <!--interval 自动切换时间间隔-->
  <!--duration 滑动动画时长-->
  <swiper :indicator-dots='true' :vertical='false' :autoplay='true' interval='2000' duration='500'  >
<!--循环显示轮播图，imgs表示接口获取的广告图片数组-->  
    <block v-for="img in imgs" :key="index">
      <swiper-item>
	<!--img表示单张广告图的地址：带有http的绝对地址-->    
           <image :src='img' style="width: 100%;" mode='widthFix'></image>
      </swiper-item>
    </block>
  </swiper>
</view>  

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）毕业设计网http://www.pc-365.net
（6）小程序编程网www.4317.org

（7）计算机编程网http://www.05423.com/