html原生listview,listview.html

列表到详情最佳实践

.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;

}

{{banner.title}}

{{banner.author}}

{{banner.time}}

• {{item.title}}
  {{item.author}}

  {{item.time}}

var lastId = ''; //最新新闻的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: function() {

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().endPulldown();

if(rsp && rsp.length > 0) {

lastId = rsp[0].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] );

}

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史