使用HTML5开发App（六）

作者: 陶好达 | 来源:发表于2016-03-16 15:40 被阅读2924次

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

上拉刷新

创建项目

创建子页面

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>

效果如下：

项目中的效果

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

网友评论

陶好达:各位不好意思因工作原因一直没有更新后续会跟进的
45e7cabc513c:index.html:1 Application Cache Error event: Manifest fetch failed (404) http://localhost:23741/WYNews/WYNews/app.manifest 你好吧主，现在运行起来提示这个找不到，帮忙看下呗
啦啦队长vv:楼主您好，为什么下载了您的代码在我这边运行出现ajax不能跨域的问题
Noah_bin:你好我按照你的方法写出的list 并不能出现
8b14b2b2b13a:写的很好，对我帮助很大，谢谢！
da6314e40465:学生党期待更新
挠叔:期待～
陶好达:demo地址：http://pan.baidu.com/s/1dEKTr9J
密码：hy1b
FinalFantasyXX: @TouchMe 太感谢了，学习学习
月夜的黑猫团:请赶紧出新教程~~
ed7985d4057e:你好。能把代码打包分享一下吗？