使用HTML5开发App（六）
2016-03-16 本文已影响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>
效果如下：
项目中的效果
在这里非常感谢小伙伴们的支持。
（完）
