326 lines
8.3 KiB
HTML
326 lines
8.3 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>列表到详情最佳实践</title>
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|||
|
|
<link href="../../../css/mui.min.css" rel="stylesheet" />
|
|||
|
|
<style type="text/css">
|
|||
|
|
.mui-media {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mui-table-view .mui-media-object {
|
|||
|
|
max-width: initial;
|
|||
|
|
width: 90px;
|
|||
|
|
height: 70px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-info {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 115px;
|
|||
|
|
right: 15px;
|
|||
|
|
bottom: 8px;
|
|||
|
|
color: #8f8f94;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-info .author,
|
|||
|
|
.meta-info .time {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-info .time {
|
|||
|
|
float: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mui-table-view:before,
|
|||
|
|
.mui-table-view:after {
|
|||
|
|
height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mui-content>.mui-table-view:first-child {
|
|||
|
|
margin-top: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner {
|
|||
|
|
height: 180px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
background-position: center;
|
|||
|
|
background-color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner .title {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 15px;
|
|||
|
|
bottom: 15px;
|
|||
|
|
width: 90%;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 21px;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 11;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="mui-content" id="news">
|
|||
|
|
<!--顶部banner图 开始-->
|
|||
|
|
<div class="banner">
|
|||
|
|
<a href="javascript:;" :data-guid="banner.guid" @tap="open_detail(banner)">
|
|||
|
|
<img :src="banner.cover" />
|
|||
|
|
<h2 class="title mui-ellipsis-2">{{banner.title}}</h2>
|
|||
|
|
<div style="display: none;">
|
|||
|
|
<div class="author">{{banner.author}}</div>
|
|||
|
|
<div class="time">{{banner.time}}</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<!--顶部banner图 结束-->
|
|||
|
|
|
|||
|
|
<!--列表信息流 开始-->
|
|||
|
|
<div id="list" class="mui-scroll-wrapper">
|
|||
|
|
<div class="mui-scroll">
|
|||
|
|
<ul class="mui-table-view">
|
|||
|
|
<li class="mui-table-view-cell mui-media" v-for="item in items">
|
|||
|
|
<a href="javascript:;" :data-guid="item.guid" @tap="open_detail(item)">
|
|||
|
|
<img class="mui-media-object mui-pull-left" :src="item.cover">
|
|||
|
|
<div class="mui-media-body">
|
|||
|
|
<div class="mui-ellipsis-2">{{item.title}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="meta-info">
|
|||
|
|
<div class="author">{{item.author}}</div>
|
|||
|
|
<div class="time">{{item.time}}</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--列表信息流 结束-->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="../../../js/mui.min.js"></script>
|
|||
|
|
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var lastId = '',
|
|||
|
|
minId = ''; //最新新闻的id
|
|||
|
|
var webview_detail = null; //详情页webview
|
|||
|
|
var titleNView = { //详情页原生导航配置
|
|||
|
|
backgroundColor: '#f7f7f7', //导航栏背景色
|
|||
|
|
titleText: '', //导航栏标题
|
|||
|
|
titleColor: '#000000', //文字颜色
|
|||
|
|
type: 'transparent', //透明渐变样式
|
|||
|
|
autoBackButton: true, //自动绘制返回箭头
|
|||
|
|
splitLine: { //底部分割线
|
|||
|
|
color: '#cccccc'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//mui初始化，配置下拉刷新
|
|||
|
|
mui.init({
|
|||
|
|
pullRefresh: {
|
|||
|
|
container: '#list',
|
|||
|
|
down: {
|
|||
|
|
style: 'circle',
|
|||
|
|
offset: '0px',
|
|||
|
|
auto: true,
|
|||
|
|
callback: pulldownRefresh
|
|||
|
|
},
|
|||
|
|
up: {
|
|||
|
|
contentrefresh: '正在加载...',
|
|||
|
|
callback: pullupRefresh
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 下拉刷新获取最新列表
|
|||
|
|
*/
|
|||
|
|
function pulldownRefresh() {
|
|||
|
|
|
|||
|
|
if(window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
|
|||
|
|
plus.nativeUI.toast('似乎已断开与互联网的连接', {
|
|||
|
|
verticalAlign: 'top'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var data = {
|
|||
|
|
column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(lastId) { //说明已有数据，目前处于下拉刷新，增加时间戳，触发服务端立即刷新，返回最新数据
|
|||
|
|
data.lastId = lastId;
|
|||
|
|
data.time = new Date().getTime() + "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//请求顶部banner信息
|
|||
|
|
mui.getJSON("http://spider.dcloud.net.cn/api/banner/36kr", data, function(rsp) {
|
|||
|
|
news.banner = {
|
|||
|
|
guid: rsp.post_id,
|
|||
|
|
title: rsp.title,
|
|||
|
|
cover: rsp.cover,
|
|||
|
|
author: rsp.author_name,
|
|||
|
|
time: dateUtils.format(rsp.published_at)
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//请求最新列表信息流
|
|||
|
|
mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {
|
|||
|
|
mui('#list').pullRefresh().endPulldownToRefresh();
|
|||
|
|
if(rsp && rsp.length > 0) {
|
|||
|
|
lastId = rsp[0].id; //保存最新消息的id，方便下拉刷新时使用
|
|||
|
|
|
|||
|
|
if(!minId) {//首次拉取列表时保存最后一条消息的id，方便上拉加载时使用
|
|||
|
|
minId = rsp[rsp.length - 1].id;
|
|||
|
|
}
|
|||
|
|
news.items = convert(rsp).concat(news.items);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 上拉加载拉取历史列表
|
|||
|
|
*/
|
|||
|
|
function pullupRefresh() {
|
|||
|
|
var data = {
|
|||
|
|
column: "id,post_id,title,author_name,cover,published_at" //需要的字段名
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if(minId) { //说明已有数据，目前处于上拉加载，传递当前minId 返回历史数据
|
|||
|
|
data.minId = minId;
|
|||
|
|
data.time = new Date().getTime() + "";
|
|||
|
|
data.pageSize = 10;
|
|||
|
|
}
|
|||
|
|
//请求历史列表信息流
|
|||
|
|
mui.getJSON("http://spider.dcloud.net.cn/api/news", data, function(rsp) {
|
|||
|
|
mui('#list').pullRefresh().endPullupToRefresh();
|
|||
|
|
if(rsp && rsp.length > 0) {
|
|||
|
|
minId = rsp[rsp.length - 1].id; //保存最后一条消息的id，上拉加载时使用
|
|||
|
|
news.items = news.items.concat(convert(rsp));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
mui.plusReady(function() {
|
|||
|
|
//预加载详情页
|
|||
|
|
webview_detail = mui.preload({
|
|||
|
|
url: 'detail.html',
|
|||
|
|
id: 'news_detail',
|
|||
|
|
styles: {
|
|||
|
|
"render": "always",
|
|||
|
|
"popGesture": "hide",
|
|||
|
|
"bounce": "vertical",
|
|||
|
|
"bounceBackground": "#efeff4",
|
|||
|
|
"titleNView": titleNView
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var news = new Vue({
|
|||
|
|
el: '#news',
|
|||
|
|
data: {
|
|||
|
|
banner: {}, //顶部banner数据
|
|||
|
|
items: [] //列表信息流数据
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 打开新闻详情
|
|||
|
|
*
|
|||
|
|
* @param {Object} item 当前点击的新闻对象
|
|||
|
|
*/
|
|||
|
|
function open_detail(item) {
|
|||
|
|
//触发子窗口变更新闻详情
|
|||
|
|
mui.fire(webview_detail, 'get_detail', {
|
|||
|
|
guid: item.guid,
|
|||
|
|
title: item.title,
|
|||
|
|
author: item.author,
|
|||
|
|
time: item.time,
|
|||
|
|
cover: item.cover
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//更改详情页原生导航条信息
|
|||
|
|
titleNView.titleText = item.title;
|
|||
|
|
webview_detail.setStyle({
|
|||
|
|
"titleNView": titleNView
|
|||
|
|
});
|
|||
|
|
setTimeout(function() {
|
|||
|
|
webview_detail.show("slide-in-right", 300);
|
|||
|
|
}, 150);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 1、将服务端返回数据，转换成前端需要的格式
|
|||
|
|
* 2、若服务端返回格式和前端所需格式相同，则不需要改功能
|
|||
|
|
*
|
|||
|
|
* @param {Array} items
|
|||
|
|
*/
|
|||
|
|
function convert(items) {
|
|||
|
|
var newItems = [];
|
|||
|
|
items.forEach(function(item) {
|
|||
|
|
newItems.push({
|
|||
|
|
guid: item.post_id,
|
|||
|
|
title: item.title,
|
|||
|
|
author: item.author_name,
|
|||
|
|
cover: item.cover,
|
|||
|
|
time: dateUtils.format(item.published_at)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return newItems;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 格式化时间的辅助类，将一个时间转换成x小时前、y天前等
|
|||
|
|
*/
|
|||
|
|
var dateUtils = {
|
|||
|
|
UNITS: {
|
|||
|
|
'年': 31557600000,
|
|||
|
|
'月': 2629800000,
|
|||
|
|
'天': 86400000,
|
|||
|
|
'小时': 3600000,
|
|||
|
|
'分钟': 60000,
|
|||
|
|
'秒': 1000
|
|||
|
|
},
|
|||
|
|
humanize: function(milliseconds) {
|
|||
|
|
var humanize = '';
|
|||
|
|
mui.each(this.UNITS, function(unit, value) {
|
|||
|
|
if(milliseconds >= value) {
|
|||
|
|
humanize = Math.floor(milliseconds / value) + unit + '前';
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
});
|
|||
|
|
return humanize || '刚刚';
|
|||
|
|
},
|
|||
|
|
format: function(dateStr) {
|
|||
|
|
var date = this.parse(dateStr)
|
|||
|
|
var diff = Date.now() - date.getTime();
|
|||
|
|
if(diff < this.UNITS['天']) {
|
|||
|
|
return this.humanize(diff);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var _format = function(number) {
|
|||
|
|
return(number < 10 ? ('0' + number) : number);
|
|||
|
|
};
|
|||
|
|
return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' + _format(date.getHours()) + ':' + _format(date.getMinutes());
|
|||
|
|
},
|
|||
|
|
parse: function(str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
|
|||
|
|
var a = str.split(/[^0-9]/);
|
|||
|
|
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|