低成本0基础打造app之渲染首页幻灯片数据

引言

本教程为

前面我们已经用uni-app写好了前端的幻灯片样式（ ），以及用WP写好了后端幻灯片接口（ ），在这一节中我将讲解如何将幻灯片数据渲染到app上面。

开始

首先我们需要定一个值来接收服务端返回的数据，并且将这个数据绑定到我们的幻灯片组上，用来循环。（在index.vue文件中），代码如下：

写方法用来请求数据（此处需要用到uni.request方法），代码如下：

在页面加载的时候执行该方法（这里用到uni的生命周期函数onLoad）：

最后，我们在视图代码中将数据渲染出来，这里用到指令：v-for

<template>
\t<view>
\t\t<view>
\t\t\t<view>
\t\t\t\t<view>
\t\t\t\t\t
\t\t\t\t\t
\t\t\t\t\t<swiper>\t\t\t\t\tindicator-dots="indicatorDots" 
\t\t\t\t\tautoplay="autoplay" 
\t\t\t\t\tinterval="interval" 
\t\t\t\t\tduration="duration"
\t\t\t\t\t>
\t\t\t\t\t
\t\t\t\t\t\t<swiper-item>
\t\t\t\t\t\t\t\t\t\t
\t\t\t\t\t\t\t<image>
\t\t\t\t\t\t/<swiper-item>
\t\t\t\t\t/<swiper>
\t\t\t\t/<view>
\t\t\t/<view>
\t\t/<view>
\t/<view>
/<template>

此刻，你在浏览器中打开项目，就能看到以下结果:

再微调一下样式就更完美了，在<style>中写入你的样式代码，这里我写：

结束

好了，app的幻灯片至此就开发完了，在该功能中重点就是uni自己的一些函数，比如说发送请求，比如说生命周期函数等等，不过感觉还是挺简单的，看看官方文档再看看我的代码，你应该能写出自己想要的幻灯片。

点击下面的链接你将获得源代码仓库地址