使用HTML5开发App（六）

这节课讲的是下拉刷新，上拉加载更多，方便读者们的学习，我会把他们分解开来讲，然后再加到咱们“网易新闻”项目中去

上拉刷新

创建项目

创建子页面

list页面

主页面内容比较简单，只需要创建子页面即可

 <script type="text/javascript" charset="utf-8">
  mui.init({
  //创建子页面
     subpages:[{
       url:"list.html",//下拉刷新内容页面地址
       id:"list-id",//内容页面标志
       styles:{
         top:'44px',//子页面顶部位置
         bottom:'44px',//子页面底部位置
         width:'100%'//子页面宽度，默认为100%
       },
     }]
  });
  
    </script>

在list页面写下拉刷新代码

 <script type="text/javascript" charset="utf-8">
    mui.init({
   pullRefresh : {
     container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
     down : {
       contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
       contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
       contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
       callback :pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
     }
   }
   
});

function pullfresh() {
    //业务逻辑代码，比如通过ajax从服务器获取新数据；
   //列表数据请求
  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);
    plus.ui.toast("刷新成功")
    //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
    mui('#refreshContainer').pullRefresh().endPulldownToRefresh();//结束刷新
   },
   error:function(error){
    console.log("列表返回失败");
    alert("网络无连接");
   }
 });
}

//用来处理列表数据的函数
    function listDataAnalyze(data){
   var arrayObj = data.T1348647853363;
   for(var i = 0; i<arrayObj.length;i++){
    finalList = '<li class="mui-table-view-cell mui-media" id="list-cell"><a href="detail.html?'+arrayObj[i].id+'"><img class="mui-media-object mui-pull-left" src='+arrayObj[i].img+'><div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
    $("#tableView-List").append(finalList);
   }
    }
    </script>

HTML代码布局

<body>
 <!--下拉刷新容器-->
 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
   <div class="mui-scroll">
     <!--数据列表-->
     <ul class="mui-table-view" id="tableView-List">
         
     </ul>
   </div>
</div>

</body>

效果如下：

上拉加载更多

mui的上拉加载和下拉刷新类似，都属于pullRefresh插件只是里面的关键字不同而已，代码如下


    <script type="text/javascript" charset="utf-8">
    mui.init({
      pullRefresh : {
        container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        up : {
          contentnomore:"没有更多数据了",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh : "正在加载...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback :pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
        }
      }
      
});

mui.plusReady(function(){
    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);
//              plus.ui.toast("加载成功")
            },
            error:function(error){
                console.log("列表返回失败");
                alert("网络无连接");
            }
    });
})
function pullfresh() {
//  alert(1);
    //业务逻辑代码，比如通过ajax从服务器获取新数据；
   //列表数据请求
        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);
//              plus.ui.toast("刷新成功")
                alert(11111);
                //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
                mui('#refreshContainer').pullRefresh().endPullupToRefresh();//结束刷新
            },
            error:function(error){
                console.log("列表返回失败");
                alert("网络无连接");
            }
    });
}

//用来处理列表数据的函数
        function listDataAnalyze(data){
            var arrayObj = data.T1348647853363;
            console.log(arrayObj.length);
            for(var i = 0; i<arrayObj.length;i++){
                finalList = '<li class="mui-table-view-cell mui-media list-cell"><a href="detail.html?'+arrayObj[i].id+'"><img class="mui-media-object mui-pull-left" src='+arrayObj[i].img+'><div class="mui-media-body">'+arrayObj[i].title+'<p class="mui-ellipsis">'+arrayObj[i].digest+'</div></a></li>';
                $("#tableView-List").append(finalList);
            }
            $(document).on('tap','.list-cell',function(){
                mui.openWindow({
                    url:"detail.html",
                    id:"detail",
                     extras:{
                    listName:arrayObj[$(this).index()].id
                }
                })
            })
        }
    </script>

HTML布局代码如下：

<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">上拉加载更多</h1>
    </header>
    
    <!--上拉加载更多容器-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
       <ul class="mui-table-view" id="tableView-List">
          
       </ul>
      </div>
    </div>

</body>

效果如下：

上拉加载更多

上拉加载更多和下拉刷新更多在App项目中是最常见功能，现在我们来把上拉加载更多加载到“网易新闻”的项目中
【注意】这里需要注意修改的地方是<div class="mii-content"></div>
我们需要在mil-content容器里面添加class类名和id，代码如下：

//修改前：
<div class="mui-content"></div>
//修改后：
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">

里面还得需要再添加一个容器<div class="mii-scroll">
代码如下：

 <div class="mii-scroll"></div>

按照上节文章中修改最终代码为：

        <!--上拉加载更多容器-->
    <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
            <!--第一个页面-->
            <div class="container-div" style="display: block;">
                <div>
                    <div class="tab_title">
                        <a>头条</a>
                        <a >热点</a>
                        <a >娱乐</a>
                        <a >财经</a>
                        <a >体育</a>
                        <a ><img src="imgs/comment_arrow_down@2x.png"/></a>
                    </div>
                </div>
                
                <div class="mui-slider ">
                    <div class="mui-slider-group" id="slider-img">
                            <!--图片、标题-->
                    </div>
                    <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
                    <div class="mui-slider-indicator" id="slider-indicator">
                            <!--图片滚动标记-->
                    </div>
                </div>
                <ul class="mui-table-view" id="tableView-List"></ul>
            </div>
        
        
        
        <!--第二个页面-->
        <div class="container-div">
            
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <img class="mui-media-object" src="http://img0.imgtn.bdimg.com/it/u=228661466,2147366548&fm=11&gp=0.jpg">
                        <div class="mui-media-body">angelababy</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="http://www.jianshu.com/users/84b5ef6309d6/latest_articles">
                        <img class="mui-media-object" src="http://img1.imgtn.bdimg.com/it/u=187435332,1856956297&fm=11&gp=0.jpg">
                        <div class="mui-media-body">她当然是小美女喽</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=angelababy&step_word=&pn=132&di=195610639760&rn=1&tn=baiduimagedetail&is=&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=874237152%2C114840319&os=1593680427%2C3868005737&ln=1000&fr=&fmq=1457428872077_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=star&oriquery=&objurl=http%3A%2F%2Fwww.jx.xinhuanet.com%2Fnews%2Fssxw%2F2016-03%2F04%2F1118236661_14570765114551n.jpg&gsm=b4">
                        <img class="mui-media-object" src="http://img4.imgtn.bdimg.com/it/u=3973574936,4030812978&fm=23&gp=0.jpg">
                        <div class="mui-media-body">她当然是小美女喽</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=angelababy&step_word=&pn=132&di=195610639760&rn=1&tn=baiduimagedetail&is=&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=874237152%2C114840319&os=1593680427%2C3868005737&ln=1000&fr=&fmq=1457428872077_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=star&oriquery=&objurl=http%3A%2F%2Fwww.jx.xinhuanet.com%2Fnews%2Fssxw%2F2016-03%2F04%2F1118236661_14570765114551n.jpg&gsm=b4">
                        <img class="mui-media-object" src="http://img2.imgtn.bdimg.com/it/u=1069537753,3932258861&fm=23&gp=0.jpg">
                        <div class="mui-media-body">她当然是小美女喽</div>
                    </a>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=angelababy&step_word=&pn=132&di=195610639760&rn=1&tn=baiduimagedetail&is=&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=874237152%2C114840319&os=1593680427%2C3868005737&ln=1000&fr=&fmq=1457428872077_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=star&oriquery=&objurl=http%3A%2F%2Fwww.jx.xinhuanet.com%2Fnews%2Fssxw%2F2016-03%2F04%2F1118236661_14570765114551n.jpg&gsm=b4">
                        <img class="mui-media-object" src="http://img2.imgtn.bdimg.com/it/u=2226388674,3850143078&fm=23&gp=0.jpg">
                        <div class="mui-media-body">她当然是小美女喽</div>
                    </a>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=angelababy&step_word=&pn=132&di=195610639760&rn=1&tn=baiduimagedetail&is=&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=874237152%2C114840319&os=1593680427%2C3868005737&ln=1000&fr=&fmq=1457428872077_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=star&oriquery=&objurl=http%3A%2F%2Fwww.jx.xinhuanet.com%2Fnews%2Fssxw%2F2016-03%2F04%2F1118236661_14570765114551n.jpg&gsm=b4">
                        <img class="mui-media-object" src="http://img1.imgtn.bdimg.com/it/u=3147254935,3611439682&fm=23&gp=0.jpg">
                        <div class="mui-media-body">她当然是小美女喽</div>
                    </a>
                </li>
            </ul>
        </div>
        <!--第三个页面-->
        <div class="container-div" id="container-div-index3">
            
            
            
        </div>

        <!--第四个页面-->
        <div class="container-div">
            
            <div class="index5-topDiv">
                <img src="imgs/login_username_icon@2x.png" alt="" id="camare-action" />
                <p>更换头像</p>
                
                
            </div>
            <div class="mui-card">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <span class="mui-icon mui-icon-home"></span>
                            <div class="mui-media-body">Home</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
                            <div class="mui-media-body">Email</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">Chat</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">Location</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">Search</div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <a href="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">Phone</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
</div>

效果如下：

项目中的效果

在这里非常感谢小伙伴们的支持。
（完）

最后编辑于：2017.12.03 03:10:52

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

使用HTML5开发App（六）

上拉刷新

上拉加载更多

推荐阅读更多精彩内容