动态添加标签

接着上篇文章接下来要做的就是，从后台获取数据，然后赋值并显示，还记得上篇文章中轮播图和列表标签是静态添加的，那么问题来了，如果这个数据是从后台服务器那边获取的，拿轮播图为例，后台给我们返回10张图片的数据，那我们应该怎么创建标签呢？呃...可能有很多小伙伴读到这里没有明白什么意思，没关系你看完这篇文章就会明白的。

之前咱们的标签是这样写的

在上面代码中看到的是一共三个img标签，那如果后台给返回10张图片，我们的这个结构应该怎么写呢？

这个时候我们需要从网络获取到数据，然后根据获取的数据数量进行循环创建标签并赋值。一口气说了这么长，那我们就一步一步来吧

第一步：使用Ajax网络请求

网络请求必须在mui.plusReady()函数中进行，具体原因请查看官方文档http://ask.dcloud.net.cn/article/122

来看下首页轮播接口：

http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore

以下数据结构：

{

"T1348647853363": [

{

"ads": [

{

"imgsrc": "http://img1.cache.netease.com/3g/2016/3/4/201603041128337df68.jpg",

"subtitle": "",

"tag": "photoset",

"title": "人大发布会开始 傅莹为发言人",

"url": "00AN0001|112244"

},

{

"imgsrc": "http://img2.cache.netease.com/3g/2016/3/4/201603041111218ff8a.jpg",

"subtitle": "",

"tag": "photoset",

"title": "人大预备会议开始 代表步入会场",

"url": "00AN0001|112238"

}

]

}

拿到接口之后，我们要去请求，如果请求成功，我们会走success这个回调函数，

mui.init();

mui.plusReady(function(){

mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{

dataType:'json',

type:'get',//请求方式

timeout:10000,//超时

success:function(data){//成功

},

error:function(error){//失败

console.log("返回失败");

}

});

})

到这一步已经成功返回data，下一步要把返回过来的数据拿出来进行解析

第二步：数据解析

首先来分析一下，哪些数据是我们想要，显而易见图片和标题是我们想要获取到的。为了看起来比较清晰，我在这里重新写一个函数dataAnalyze()，在这个函数里面进行解析数据，在success回调里面去调用。

function dataAnalyze(data){

//图片和标题都在‘ads’这个数组中，首先要拿到这个数组，这里面使用点语法获取到数组。

var arr = data.T1348647853363[0].ads;//获取到‘ads’数组

for(var i = 0; i

//对数组遍历分别拿到图片和标题

console.log(arr[i].imgsrc);

console.log(arr[i].title);

}

}

dataAnalyze()函数写好了之后，我们需要在success回调里面去调用

mui.init();

mui.plusReady(function(){

mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{

dataType:'json',

type:'get',//请求方式

timeout:10000,//超时

success:function(data){//成功

dataAnalyze(data);

},

error:function(error){//失败

console.log("返回失败");

}

});

})

第三步：动态创建标签并赋值

还记得上篇文章中写的轮播图吗？就是下面这一坨

现在我们要做的就是把这些结构里面的mui-slider-item给删除掉，因为我们要做的是动态添加这些item，为了方便通过ID选择器查找到到对应标签，这里面添加了一个id，修改完成之后剩余如下代码：

接下来我们要在dataAnalyze()函数里面去循环创建标签并且赋值，代码如下

function dataAnalyze(data){

var arr = data.T1348647853363[0].ads;

console.log(data);

var finalList = null;

for(var i = 0; i

console.log(arr[i].imgsrc);

console.log(arr[i].title);

//轮播图标签结构

finalList = '

'

//插入slider-img标签里面

$("#slider-img").append(finalList);

//插入轮播标记

$("#slider-indicator").append('

//插入完成必须初始化，否则图片不能滚动

mui('.mui-slider').slider({

interval:0//自动轮播周期，若为0则不自动播放，默认为0；

});

}

}

这个时候我们就完成了动态创建，添加，赋值.轮播图已经完成。

轮播图

第四步：新闻列表赋值

开始给新闻列表创建赋值，还是来先看下新闻列表数据结构，列表页面要用的数据莫非就是图片、抬头、描述。

{

"T1348647853363": [

{

"boardid": "3g_bbs",

"clkNum": 0,

"digest": "小伙送女友卫生巾，女友十分感动，还他了一个用过的。",

"docid": "BHB8OPBL00964JJM",

"downTimes": 0,

"id": "BHB8OPBL00964JJM",

"img": "http://img5.cache.netease.com/3g/2016/3/4/2016030417255966ffe.jpg",

"imgsrc": "http://img5.cache.netease.com/3g/2016/3/4/2016030417255966ffe.jpg",

"imgType": 0,

"interest": "A",

"lmodify": "2016-03-04 19:05:26",

"picCount": 0,

"program": "HY",

"prompt": "成功为您推荐10条新内容",

"ptime": "2016-03-04 18:57:12",

"recReason": "热门文章(原创)",

"recType": 0,

"replyCount": 260,

"replyid": "BHB8OPBL00964JJM",

"source": "新闻七点整",

"TAG": "语音",

"TAGS": "语音",

"template": "manual",

"title": "新闻七点整：送你一车姨妈巾",

"unlikeReason": [

"原创/1",

"来源:新闻七点整/4",

"内容重复/6"

],

"upTimes": 0

}

]

}

//列表数据请求

mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{

dataType:'json',

type:'get',

timeout:10000,

success:function(data){

},

error:function(error){

console.log("列表返回失败");

}

});

还是原来的套路，返回成功之后，我们为了清晰，再写一个名字为listDataAnalyze()函数用来专门用来解析列表的数据，并且创建标签并赋值。

//用来处理列表数据的函数

function listDataAnalyze(data){

var arrayObj = data.T1348647853363;

for(var i = 0; i

console.log(arrayObj[i].title);

finalList = '

[站外图片上传中……(8)]

';

$("#tableView-List").append(finalList);

}

}

我们这个函数写完之后呢，来在数据请求成功之后调用此函数

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #a5b2b9}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #2eafa9}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #060606}p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 22.0px Consolas; color: #6b82d9}span.s1 {color: #000000}span.s2 {color: #060606}span.s3 {color: #596972}span.s4 {color: #2eafa9}span.s5 {color: #ad5cff}span.s6 {color: #6b82d9}span.s7 {color: #b58a00}span.s8 {color: #3c7400}span.Apple-tab-span {white-space:pre}

//列表数据请求

mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS%2FPvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{

dataType:'json',

type:'get',

timeout:10000,

success:function(data){

listDataAnalyze(data);

},

error:function(error){

console.log("列表返回失败");

}

});

还记得上一篇文章中列表的这一坨吗？

• [站外图片上传中……(9)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(10)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(11)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(12)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(13)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(14)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(15)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

• [站外图片上传中……(16)]

  标题

  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

现在修改为下面代码，并且添加一个id为了方便获取。

好了，这个列表也已经加载出来了，效果如下：

效果

好了，大功告成，今天的学习就到这里，今天的内容代码改动可能比较大，感觉代码很多，其实跟着我的步骤一步一步来肯定能写出来，加油加油。我会准们出一篇文章讲解怎么抓包。

下集预告：TabBar图标修改，页面跳转

未完待续...