html5获取新闻列表查看详细内容
2016-05-27 09:32
776 查看
主要功能分为二大模块
一、通过客户端发送异步请求Ajax解析json返回新闻列表给用户，当用户进行查看新闻标题时，上拉可以加载更多的数据，每次是通过网络请求查询10条记录，下拉如果有新的新闻可以实时刷新。
二、通过点击新闻标题可以查看新闻详细内容，包括新闻内容和图片时间等。
首页index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">吉首大学软件服务外包学院新闻快读</h1>
</header>
</body>
<script type="text/javascript" charset="utf-8">
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'newslist.html',//子页面html地址，支持本地和网络
id:'newslist.html',
styles:{
top: '45px',//子页窗口距离窗口顶部的位置
bottom: '0px',//子页窗口距离窗口底部的位置
}
}]
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
};
</script>
</html>
newlist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="UTF-8">
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识
down:{
contentdown:"下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh:"正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback:pulldown //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据
},
up:{
contentrefresh:"正在加载...",
contentnomore:"没有更多数据了",
callback:pullup
}
}
});
var cpage=1;
var tpage=10;
var url="http://rjxy.jsu.edu.cn/php/listaccess.php";
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
tpage=Math.ceil(data["total"]/10);
var listdata=data["rows"];
var listnews=document.getElementById("listnews");
var flist="";
for(i=0;i<listdata.length;i++){
var ndata='<li class="mui-table-view-cell"><a data-url="'+listdata[i].url+'" class="mui-navigate-right"><p>'+listdata[i].title+'</p><p>发布日期：'+listdata[i].newsdate+'</p></a></li>';
console.info(ndata);
flist=flist+ndata;
}
listnews.innerHTML+=flist;
bindtap();
},
error:function(){}
})
//下拉刷新函数
function pulldown(){
setTimeout(function() {
if(cpage<tpage) cpage=cpage+1;
url="http://rjxy.jsu.edu.cn/php/listaccess.php?page="+cpage;
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
var listdata=data["rows"];
var listnews=document.getElementById("listnews");
for(i=0;i<listdata.length;i++){
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a data-url="'+listdata[i].url+'" class="mui-navigate-right"><p>'+listdata[i].title+'</p><p>发布日期：'+listdata[i].newsdate+'</p></a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
bindtap();
},
error:function(){}
})
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新结束
}, 1500);
}
//上拉加载函数
function pullup(){
setTimeout(function() {
if(cpage<tpage) cpage=cpage+1;
mui('#pullrefresh').pullRefresh().endPullupToRefresh((cpage >= tpage));
url="http://rjxy.jsu.edu.cn/php/listaccess.php?page="+cpage;
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
var listdata=data["rows"];
var listnews=document.getElementById("listnews");
var flist="";
for(i=0;i<listdata.length;i++){
var ndata='<li class="mui-table-view-cell"><a data-url="'+listdata[i].url+'" class="mui-navigate-right"><p>'+listdata[i].title+'</p><p>发布日期：'+listdata[i].newsdate+'</p></a></li>';
flist=flist+ndata;
console.info(flist);
bindtap();
}
listnews.innerHTML+=flist;
},
error:function(){}
})
}, 1500);
}
//绑定每条新闻的触摸事件
function bindtap(){
mui("#listnews").on("tap", "a", function (){
mui.openWindow({
url: "newsdetail.html",
id: "detail",
waiting:{
autoShow:true,//自动显示等待框，默认为true
title:'正在加载...'
},
extras:{
url:this.getAttribute('data-url')
}
});
})
}
</script>
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" id="listnews">
</ul>
</div>
</div>
</body>
</html>
newsdetail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="UTF-8">
mui.init();
//初始化操作
var subpage_style = {
top: '45px',
bottom: '5px',
left: '5px',
right: '5px'
};
mui.plusReady(function() {
var self = plus.webview.currentWebview();
var w = plus.webview.create(self.url, self.url, subpage_style);
w.show();
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">新闻详情</h1>
</header>
</body>
</html>
另外如果有想学习可以加我扣扣交流下1040271995，源码下载地址http://download.csdn.net/detail/qq_15950325/9532633，希望能够互相学习！
一、通过客户端发送异步请求Ajax解析json返回新闻列表给用户，当用户进行查看新闻标题时，上拉可以加载更多的数据，每次是通过网络请求查询10条记录，下拉如果有新的新闻可以实时刷新。
二、通过点击新闻标题可以查看新闻详细内容，包括新闻内容和图片时间等。
首页index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">吉首大学软件服务外包学院新闻快读</h1>
</header>
</body>
<script type="text/javascript" charset="utf-8">
mui.init({
gestureConfig:{
doubletap:true
},
subpages:[{
url:'newslist.html',//子页面html地址，支持本地和网络
id:'newslist.html',
styles:{
top: '45px',//子页窗口距离窗口顶部的位置
bottom: '0px',//子页窗口距离窗口底部的位置
}
}]
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
mui.back = function() {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
};
</script>
</html>
newlist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="UTF-8">
mui.init({
pullRefresh : {
container:"#pullrefresh",//下拉刷新容器标识
down:{
contentdown:"下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh:"正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback:pulldown //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据
},
up:{
contentrefresh:"正在加载...",
contentnomore:"没有更多数据了",
callback:pullup
}
}
});
var cpage=1;
var tpage=10;
var url="http://rjxy.jsu.edu.cn/php/listaccess.php";
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
tpage=Math.ceil(data["total"]/10);
var listdata=data["rows"];
var listnews=document.getElementById("listnews");
var flist="";
for(i=0;i<listdata.length;i++){
var ndata='<li class="mui-table-view-cell"><a data-url="'+listdata[i].url+'" class="mui-navigate-right"><p>'+listdata[i].title+'</p><p>发布日期：'+listdata[i].newsdate+'</p></a></li>';
console.info(ndata);
flist=flist+ndata;
}
listnews.innerHTML+=flist;
bindtap();
},
error:function(){}
})
//下拉刷新函数
function pulldown(){
setTimeout(function() {
if(cpage<tpage) cpage=cpage+1;
url="http://rjxy.jsu.edu.cn/php/listaccess.php?page="+cpage;
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
var listdata=data["rows"];
var listnews=document.getElementById("listnews");
for(i=0;i<listdata.length;i++){
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a data-url="'+listdata[i].url+'" class="mui-navigate-right"><p>'+listdata[i].title+'</p><p>发布日期：'+listdata[i].newsdate+'</p></a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
bindtap();
},
error:function(){}
})
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新结束
}, 1500);
}
//上拉加载函数
function pullup(){
setTimeout(function() {
if(cpage<tpage) cpage=cpage+1;
mui('#pullrefresh').pullRefresh().endPullupToRefresh((cpage >= tpage));
url="http://rjxy.jsu.edu.cn/php/listaccess.php?page="+cpage;
mui.ajax(url,{
dataType:'json',
type:'get',
timeout:10000,
success:function(data){
var listdata=data["rows"];
var listnews=document.getElementById("listnews");
var flist="";
for(i=0;i<listdata.length;i++){
var ndata='<li class="mui-table-view-cell"><a data-url="'+listdata[i].url+'" class="mui-navigate-right"><p>'+listdata[i].title+'</p><p>发布日期：'+listdata[i].newsdate+'</p></a></li>';
flist=flist+ndata;
console.info(flist);
bindtap();
}
listnews.innerHTML+=flist;
},
error:function(){}
})
}, 1500);
}
//绑定每条新闻的触摸事件
function bindtap(){
mui("#listnews").on("tap", "a", function (){
mui.openWindow({
url: "newsdetail.html",
id: "detail",
waiting:{
autoShow:true,//自动显示等待框，默认为true
title:'正在加载...'
},
extras:{
url:this.getAttribute('data-url')
}
});
})
}
</script>
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" id="listnews">
</ul>
</div>
</div>
</body>
</html>
newsdetail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="UTF-8">
mui.init();
//初始化操作
var subpage_style = {
top: '45px',
bottom: '5px',
left: '5px',
right: '5px'
};
mui.plusReady(function() {
var self = plus.webview.currentWebview();
var w = plus.webview.create(self.url, self.url, subpage_style);
w.show();
})
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">新闻详情</h1>
</header>
</body>
</html>
另外如果有想学习可以加我扣扣交流下1040271995，源码下载地址http://download.csdn.net/detail/qq_15950325/9532633，希望能够互相学习！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证（升级版）
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器：Atom
- rem : web app适配的秘密武器
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享