-
Notifications
You must be signed in to change notification settings - Fork 0
/
mouthList.html
186 lines (162 loc) · 6.08 KB
/
mouthList.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
<!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>
<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>
.index{
color: red;
font-family: '楷体';
}
.genres {
color:orangered;
}
.directors{
color:darkorange;
}
.casts{
font-weight: bolder;
color:#FF0000;
}
.year{
color: dodgerblue;
}
.score{
color: #FF8C00;
padding-right:2px ;
}
.movies_images {
max-width: 100px !important;
width: 100px !important;
height: 100px !important;
margin-right: 20px;
}
</style>
</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>
<div class="mui-content">
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view" id="movies">
<li class="mui-table-view-cell mui-media" v-for="(item,index) in moviesList">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left movies_images" :src="item.images">
<div class="mui-media-body">
<span class="index">{{index+1}}</span> {{item.title}}
<p class="mui-ellipsis">电影类型:<span class="genres">{{item.genres}}</span></p>
<p class="mui-ellipsis">导演:<span class="directors">{{item.directors}}</span></p>
<p class="mui-ellipsis">演员:<span class="casts">{{item.casts}}</span></p>
<p class="mui-ellipsis">年份:<span class="year">{{item.year}}</span>
评分:<span class="score">{{item.score}}</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
var top250 = new Vue({
el: "#movies",
data: {
moviesList: []
}
});
//mui 初始化时设置pullRefresh各项参数，与双 webview 模式的子页面设置是一样的。
mui.init({
pullRefresh: {
container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
//下拉刷新功能 刷新
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: true, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "别催，人家正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
//上拉加载 加载更多数据
up: {
height: 50, //可选.默认50.触发上拉加载拖动距离
auto: true, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '别欺负我了,人家可是很有底线的...', //可选，请求完毕若没有更多数据时显示的提醒内容；
callback: loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
//从服务器获取数据
function convert(items){
var list=[];//申明一个数组
//处理服务器的数据
items.forEach(function(item){
var casts="";
for(var i=0; i<item.casts.length;i++){
casts+=item.casts[i].name+" ";
}
//添加到数组中
list.push(
{
id:item.id, //id
title:item.title, //标题
images:item.images.large, //图片
genres:item.genres.toString(),//分类
directors:item.directors[0].name,//导演
casts:casts,//演员
score:item.rating.average,//评分
year:item.year//年份
}
);
});
return list;
};
//下拉刷新功能 刷新
function pullfresh(){
mui.getJSON(
"http://api.douban.com/v2/movie/top250",
{start:0,count:10},
function(data){
top250.moviesList=convert(data.subjects);
//业务逻辑代码，比如通过ajax从服务器获取新数据；
//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
//没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
mui('#refreshContainer').pullRefresh().endPulldown();
}
);
};
//上拉加载 加载更多数据
//正在热映 http://api.douban.com /v2/movie/in_theaters
//即将上映 http://api.douban.com/v2/movie/coming_soon
//TOP 250 http://api.douban.com/v2/movie/top250
function loadMoreData(){
mui.getJSON(
"http://api.douban.com/v2/movie/top250",
{start:top250.moviesList.length, count:10},
function(data){
top250.moviesList=top250.moviesList.concat(convert(data.subjects));
//业务逻辑代码，比如通过ajax从服务器获取新数据；
//1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
//2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
var bool=top250.moviesList.length>=data.total;
mui("#refreshContainer").pullRefresh().endPullupToRefresh(bool);
if(bool){
//禁用上拉刷新
mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
}
}
);
}
</script>
</body>
</html>