-
Notifications
You must be signed in to change notification settings - Fork 32
/
Copy pathhome-subpage-1.html
247 lines (215 loc) · 8.02 KB
/
home-subpage-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!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>
html,
body {
background-color: #efeff4;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script src="js/template-web.js"></script>
<!--下拉刷新的框架-->
<div id="home" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--文本放在这里才会使用刷新-->
</div>
</div>
<!--HTML模板-->
<script id="home-template" type="text/html">
{{each items item}}
<div class="mui-card">
<!--页眉，放置标题-->
<div class="mui-card-header mui-card-media">
<img src="./images/logo.png" />
<div class="mui-media-body">
{{item.publisher}}
<p id="pubdate">发表于 {{item.pubdate}}</p>
</div>
</div>
<!--内容区-->
<div class="mui-card-content" style="padding:10px;" id="{{item._id}}">
<h4 class='card-title'>{{item.title}}</h4>
<img class="card-img" alt="{{item.title}}" src="{{item.img}}" style="width: 100%;padding:4px 16px 2px 2px;" />
<!--{{item.intro}}-->
</div>
<!--页脚，放置补充信息或支持的操作-->
<div class="mui-card-footer">
<a class="mui-card-link upvote" id="{{item._id}}">点赞{{item.upvote}}</a>
<a class="mui-card-link">阅读量{{item.read}}</a>
<a class="mui-card-link readmore" id="{{item._id}}">阅读更多</a>
</div>
</div>
{{/each}}
</script>
<script>
// 从本地取出用户数据
var data = app.getState();
var userid = '';
if (JSON.stringify(data) != '{}'){
// 用户已登录
userid = data._id;
}
//======================================
mui.init({
swipeBack: false,
keyEventBind: {
backbutton: false //关闭back按键监听
},
pullRefresh : {
container:'#home',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
up : {
auto:true,
style:'circle',
contentrefresh: '正在加载...',
callback :function() {
var self = this;
// 这里的this == mui('#refreshContainer').pullRefresh()
// 加载更多的内容
loadMore(this);
} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'100px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: false,//可选,默认false.首次加载自动上拉刷新一次
callback :function() {
var self = this;
// 这里的this == mui('#refreshContainer').pullRefresh()
reload();
} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
// 重新加载
var reload = function() {
// 加载更多的内容到列表中
setTimeout(function(){
// 获取 userid
var userID_str = '';
if (userid != ''){
userID_str = '&userID=' + userid;
}
// 从后台取数据
mui.getJSON('http://ihealth.yangyingming.com/api/v1/articlelist?page=' + 1 + '&limit=5&cate=recommend' + userID_str, function(data){
var article_list = document.getElementById('home').getElementsByClassName('mui-scroll')[0];
// 根据模板将数据渲染成 HTML
var html = template('home-template', {'items':data});
//wd-日期更改
// 将 HTML 插入到列表后
article_list.innerHTML = html;
// 停止刷新
mui('#home').pullRefresh().endPulldown();
});
}, 500); // 如果没有更多数据了，则关闭上拉加载
};
// 当前应该加载的页数
var cur_page = 1;
var loadMore = function(pullRefresh) {
// 加载更多的内容到列表中
pullRefresh.endPullupToRefresh( (cur_page>6) );
setTimeout(function(){
// 从后端获取数据
// mui.toast('正在加载第' + cur_page + '页数据……');
// 获取 userid
var userID_str = '';
if (userid != '')
userID_str = '&userID=' + userid;
mui.getJSON('http://ihealth.yangyingming.com/api/v1/articlelist?page=' + cur_page++ + '&limit=5&cate=recommend' + userID_str,
function(data){
var article_list = document.getElementById('home').getElementsByClassName('mui-scroll')[0];
// 根据模板将数据渲染成 HTML
var html = template('home-template', {'items':data});
//wd-日期更改
// 将 HTML 插入到列表后
article_list.innerHTML += html;
// 超过一定页数便不再加载。参数为 true 表示不再更新数据。
pullRefresh.endPullupToRefresh( (cur_page>6) );
});
}, 500); // 如果没有更多数据了，则关闭上拉加载
};
//----------------------------------------
mui.plusReady(function(){
// if(mui.os.ios){
// mui('.mui-scroll-wrapper').scroll({
// scrollY: true, //是否竖向滚动
// startX: 0, //初始化时滚动至x
// startY: 0, //初始化时滚动至y
// indicators: false, //是否显示滚动条
// bounce: false, //是否启用滚动条回弹
// deceleration: 0.005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
// });
// document.getElementById('home').style = 'margin-top:-40px;';
// }
if(mui.os.android) {
setTimeout('reload()', 800);
} else {
reload();
}
//预加载详情页
webview_article = mui.preload({
url: 'article.html',
id: 'article.html',
styles: {
"render": "always",//一直渲染
"popGesture": "hide"
}
});
// 监听 阅读更多 事件
document.querySelector('body').addEventListener('tap',function (e) {
// 点击每个 card 上的 标题、图片、文字简介 时，打开文章详情页面
if (e.target.className == 'card-title' || e.target.className == 'card-img' || e.target.className == 'mui-card-content' || e.target.className == 'mui-card-link readmore'){
if (e.target.className == 'card-img' || e.target.className == 'card-title')
var id = e.target.parentNode.getAttribute('id');
else
var id = e.target.getAttribute('id');
// 获得文章详情页面 webview
articlePage = plus.webview.getWebviewById('article.html');
// 注入数据
mui.fire(articlePage,'currentId',{
id:id
});
// 打开详情页面
mui.openWindow({
url:'article.html',
id:'article.html'
});
}
});
//wd-监听点赞功能
document.querySelector('body').addEventListener('tap',function (e) {
// 点击每个 card 上的 标题、图片、文字简介 时，打开文章详情页面
if ( e.target.className == 'mui-card-link upvote'){
var id = e.target.getAttribute('id');
// console.log(id);
// 点赞接口
mui.alert('感谢您的投票！', '提示', function() {
var data = {
id:id
}
if (userid != ''){
data.userID = userid;
}
mui.get('http://ihealth.yangyingming.com/api/v1/updateUpvote',data,function(data){
// console.log(id);
// console.log(data);
},'json'
);
});
}
});
//-wd
});
</script>
</body>
</html>