使用HTML5开发App（三）

动态添加标签

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

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

<div class="mui-slider ">
            <div class="mui-slider-group">
              <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img2.imgtn.bdimg.com/it/u=3435748019,1733487343&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题1</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img1.imgtn.bdimg.com/it/u=933204148,833772717&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题2</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img0.imgtn.bdimg.com/it/u=522735967,1809391751&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题3</p>
                    </a>
                </div>
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>

在上面代码中看到的是一共三个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这个回调函数，

 <script type="text/javascript" charset="utf-8">
       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("返回失败");
             }
          });
  })
</script>

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

第二步：数据解析

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

    function dataAnalyze(data){
    //图片和标题都在‘ads’这个数组中，首先要拿到这个数组，这里面使用点语法获取到数组。
      var arr = data.T1348647853363[0].ads;//获取到‘ads’数组
      for(var i = 0; i<arr.length;i++){
    //对数组遍历分别拿到图片和标题
        console.log(arr[i].imgsrc);
        console.log(arr[i].title);
       }
    }

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

 <script type="text/javascript" charset="utf-8">
       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("返回失败");
             }
          });
  })
</script>

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

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

<div class="mui-slider ">
            <div class="mui-slider-group">
              <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img2.imgtn.bdimg.com/it/u=3435748019,1733487343&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题1</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img1.imgtn.bdimg.com/it/u=933204148,833772717&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题2</p>
                    </a>
                </div>
                <div class="mui-slider-item">
                    <a href="#">
                        ![](http://img0.imgtn.bdimg.com/it/u=522735967,1809391751&fm=21&gp=0.jpg)
                        <p class="mui-slider-title">标题3</p>
                    </a>
                </div>
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>

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


  <div class="mui-slider ">
            <div class="mui-slider-group" id="slider-img">
              //图片、标题
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator" id="slider-indicator">
              //图片滚动标记
            </div>
  </div>

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

function dataAnalyze(data){
    var arr = data.T1348647853363[0].ads;
    console.log(data);
    var finalList = null;
    for(var i = 0; i<arr.length;i++){
     console.log(arr[i].imgsrc);
     console.log(arr[i].title);
     //轮播图标签结构
      finalList = '<div class="mui-slider-item"><a href="#">[站外图片上传中……(7)]<p class="mui-slider-title">'+arr[i].title+'</p> </a></div>'
     //插入slider-img标签里面
      $("#slider-img").append(finalList);
     //插入轮播标记
     $("#slider-indicator").append('<div class="mui-indicator"></div>')
     //插入完成必须初始化，否则图片不能滚动
     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
  }
 ]
}

为了让大家可以清晰看出来代码的逻辑，我这里面不做代码优化，我会继续写一个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

//列表数据请求
 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<arrayObj.length;i++){
    console.log(arrayObj[i].title);
    finalList = '<li class="mui-table-view-cell mui-media"><a href="javascript:;">[站外图片上传中……(8)]<div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
    $("#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("列表返回失败");
   }
 });

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

<ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(9)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
     <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(10)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(11)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(12)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(13)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(14)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(15)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
      <li class="mui-table-view-cell mui-media">
          <a href="javascript:;">
              [站外图片上传中……(16)]
              <div class="mui-media-body">
                  标题
                  <p class="mui-ellipsis">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
              </div>
          </a>
      </li>
  </ul>

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

  <ul class="mui-table-view" id="tableView-List">
     
  </ul>

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

效果

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

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

未完待续...

最后编辑于：2017.12.03 02:49:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,482评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,377评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,762评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,273评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,289评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,046评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,351评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,988评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,476评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,948评论 2赞 324
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,064评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,712评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,261评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,264评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,486评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,511评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,802评论 2赞 345