前面我们已经用uni-app写好了前真个幻灯片样式（低本钱0根本打造属于你自己的app——uni-app制作首页幻灯片），以及用WP写好了后端幻灯片接口（低本钱0根本开拓app之开拓首页幻灯片接口），在这一节中我将讲解如何将幻灯片数据渲染到app上面。
开始首先我们须要定一个值来吸收做事端返回的数据，并且将这个数据绑定到我们的幻灯片组上，用来循环。（在index.vue文件中），代码如下：
<script>export default {//此处为该页面须要用到的数据，在项目逻辑中可以对这些数据进行改变data() {return {homeSlide: [], //教程uni-app渲染幻灯片数据第一步：定义值吸收幻灯片数据}},onLoad() {},//此处为自定义方法methods: {}}</script>
写方法用来要求数据（此处须要用到uni.request方法），代码如下：
<script>export default {//此处为该页面须要用到的数据，在项目逻辑中可以对这些数据进行改变data() {return {homeSlide: [], //教程uni-app渲染幻灯片数据第一步：定义值吸收幻灯片数据}},onLoad() {},//此处为自定义方法methods: {//教程uni-app渲染幻灯片数据第二步：定义获取幻灯片数据的方法getHomeSlide（）getHomeSlide() {// 用uniapp的request发起要求uni.request({url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',//接口地址success: (res) => {// 要求成功之后将幻灯片数据赋值给homeSlidethis.homeSlide=res.post;}});}}}</script>
在页面加载的时候实行该方法（这里用到uni的生命周期函数onLoad）：
<script>export default {//此处为该页面须要用到的数据，在项目逻辑中可以对这些数据进行改变data() {return {homeSlide: [], //教程uni-app渲染幻灯片数据第一步：定义值吸收幻灯片数据}},onLoad() {//教程uni-app渲染幻灯片数据第三步：实行方法getHomeSlide（）this.getHomeSlideFunc();},//此处为自定义方法methods: {//教程uni-app渲染幻灯片数据第二步：定义获取幻灯片数据的方法getHomeSlide（）getHomeSlideFunc() {var _self = this;// 用uniapp的request发起要求uni.request({url: 'http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php',//接口地址success: (res) => {// 要求成功之后将幻灯片数据赋值给homeSlide_self.homeSlide=res.data.post;}});}}}</script>
末了，我们在视图代码中将数据渲染出来，这里用到指令：v-for
<template><view><view class=\"大众uni-padding-wrap\"大众><view class=\"大众page-section swiper\"大众><view class=\"大众page-section-spacing\公众><!-- 一组幻灯片代码开始，用到组件swiper --><!-- indicator-dots autoplay interval……：组件干系属性，详细可以查看官网解释 --><swiper class=\"大众swiper\"大众 indicator-dots=\"大众indicatorDots\"大众 autoplay=\公众autoplay\"大众 interval=\"大众interval\公众 duration=\公众duration\公众><!-- 教程uni-app渲染幻灯片数据第三步：渲染数据 --><swiper-item v-for=\"大众(item , index) in homeSlide\"大众 :key=\"大众index\"大众><!-- uni img组件 src绑定值为做事端返回的数据中的文章缩略图 --><image :src=\公众item.img\"大众 mode=\"大众\"大众></image></swiper-item></swiper></view></view></view></view></template>
此刻，你在浏览器中打开项目，就能看到以下结果:
再微调一下样式就更完美了，在<style></style>中写入你的样式代码，这里我写：
<style>/ 将这组幻灯片中的子项目改成我们设计图中的灰色 /swiper-item {background-color: #f8f8f8;}/ 教程uni-app渲染幻灯片数据末了一步：美化 /swiper-item image{width: 100%;}</style>
结束
好了，app的幻灯片至此就开拓完了，在该功能中重点便是uni自己的一些函数，比如说发送要求，比如说生命周期函数等等，不过觉得还是挺大略的，看看官方文档再看看我的代码，你该当能写出自己想要的幻灯片。
点击下面的链接你将得到源代码仓库地址
