|
|
例子是参照网上的MUI豆瓣电影，但是android上有一个问题 上拉后卡主不能动，并且提示 Ignored attempt to cancel a touchmove event with cancelable=false
查了很多，最后解决的方案是 阻止了冒泡事件。
1 <!DOCTYPE html>
2<html>
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7 <title>首页</title>
8 <script src="js/mui.min.js"></script>
9 <link href="css/mui.min.css" rel="stylesheet" />
10 <link href="css/style.css" rel="stylesheet" />
11  <style>
12 html,
13  body {}{
14 background-color: white;
15 }
16
17 .wrap-search {}{
18 margin: 15px;
19 background: #E6E6E6;
20 height: 30px;
21 border-radius: 5px;
22 text-align: center;
23 }
24
25 .item-img {}{
26 width: 60px;
27 height: 90px;
28 margin-right: 10px;
29 }
30 </style>
31 </head>
32
33 <body>
34 <div class="mui-content" style="background: white;">
35 <div class="wrap-search">
36 <span class="mui-icon mui-icon-search" style="line-height: 30px; color: #AAAAAA; font-size: 16px;"></span>
37 <span style="line-height: 30px; color: #AAAAAA; font-size: 14px;">电影/电视剧/影人</span>
38 </div>
39
40 <div id="refreshContainer" class="mui-scroll-wrapper" >
41 <div class="mui-scroll">
42 <ul class="mui-table-view" id="movies">
43 <li class="mui-table-view-cell" v-for="item in movies">
44 <img class="item-img mui-pull-left" :src="item.cover" />
45 <div class="mui-ellipsis dark-big">
46 {{item.title}}
47 </div>
48 <div class="mui-ellipsis ">
49 <span class="gray-small">{{ item.genres}}</span>
50 <span v-if="item.score>0" class="orange-small"> {{item.score}}分</span>
51 <span v-else class="orange-small">暂无评分</span>
52 </div>
53
54 <div class="mui-ellipsis gray-small">
55 导演：{{item.directors}}
56 </div>
57 <div class="mui-ellipsis gray-small">
58 主演：{{item.casts}}
59 </div>
60 </li>
61
62 </ul>
63 </div>
64
65 </div>
66 </div>
67
68 <script src="js/vue.min.js"></script>
69 <script src="js/util.js"></script>
70 <script type="text/javascript">
71 var data_movies = new Vue({
72 el: '#movies',
73 data: {
74 movies: []
75 }
76 });
77
78 var aniShow = {};
79
80 mui.init({
81 swipeBack: true, //启用右滑关闭功能
82 pullRefresh: {
83 container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
84 down: {
85 auto: false, //可选,默认false.首次加载自动上拉刷新一次
86 callback: refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
87 },
88 up: {
89 height: 50, //可选.默认50.触发上拉加载拖动距离
90 auto: true, //可选,默认false.自动上拉加载一次
91 contentrefresh: "正在加载", //可选，正在加载状态时，上拉加载控件上显示的标题内容
92 contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
93 callback: loadmorData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
94 }
95 }
96 });
97
98 // 刷新数据 重新调用接口
99 function refreshData() {
100 // 请求热映列表接口
101 mui.getJSON(baseUrl + 'movie/in_theaters', {
102 start: 0,
103 count: 10
104 }, function(resp) {
105 data_movies.movies.splice(0, data_movies.movies.length);
106 data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
107 mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
108 mui('#refreshContainer').pullRefresh().refresh(true);
109 })
110
111 }
112
113 var tatalCount = 0;
114 // 加载分页
115 function loadmorData() {
116 if(data_movies.movies.length > tatalCount ){
117 mui.toast('我是有底线的.');
118 return;
119 }
120 // 请求热映列表接口
121 mui.getJSON(baseUrl + 'movie/in_theaters', {
122 start: data_movies.movies.length,
123 count: 10
124 }, function(resp) {
125 data_movies.movies = data_movies.movies.concat(convert(resp.subjects));
126 tatalCount = resp.total ;
127 mui('#refreshContainer').pullRefresh().endPullupToRefresh(data_movies.movies.length > resp.total);
128 })
129
130 }
131
132 mui.plusReady(function() {
133 var self = plus.webview.currentWebview(),
134 nviews = self.getSubNViews(),
135 subpages = util.options.subpages;
136 // 创建子webview窗口 并初始化
137 util.initSubpage(aniShow);
138 activePage = plus.webview.currentWebview();
139
140 //给每个view 添加监听点击切换
141 for(var i = 0; i < 3; i++) {
142 nviews[i].addEventListener('click', clickEvent, false);
143 }
144
145 // 自定义 tab 点击事件
146 function clickEvent(e) {
147 var currId = e.target.id,
148 currIndex = parseInt(currId.substr(currId.length - 1, 1) - 1),
149 currView = self.getStyle().subNViews[currIndex];
150 // 匹配对应tab窗口
151 if(currIndex > 0) {
152 targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
153
154 } else {
155 targetPage = plus.webview.currentWebview();
156 }
157
158 if(targetPage == activePage) {
159 return;
160 }
161
162 if(currIndex !== 3) {
163 //底部选项卡切换
164 util.toggleNview(currView, currIndex);
165 // 子页面切换
166 util.changeSubpage(targetPage, activePage);
167 //更改当前活跃的页面
168 activePage = targetPage;
169 }
170 }
171
172
173
174 });
175
176 // 添加点击事件
177
178 mui('.wrap-search')[0].addEventListener('tap', function() {
179 console.log('click .0')
180 })
181
182 mui('.mui-scroll-wrapper').scroll({
183 indicators: false
184 });
185
186 mui('.mui-scroll-wrapper')[0].addEventListener('touchmove', function (e) {
187 e.stopPropagation();
188 });
189//
190// function buffer(fn, ms) {
191// var timeout;
192// return function() {
193// if (timeout) return;
194// var args = arguments;
195// timeout = setTimeout(function() {
196// timeout = null;
197// fn.apply(null, args);
198// }, ms);
199// }
200// }
201//
202// document.querySelector('.mui-scroll-wrapper').onScroll = buffer(onScroll, 100);
203
204
205
206 // 数据转换
207 function convert(items) {
208 var newItems = [];
209
210 items.forEach(function(item) {
211 var genres = item.genres.toString().replace(/,/g, '/');
212 // 导演
213 var directors = '';
214 for(var i = 0; i < item.directors.length; i++) {
215 directors += item.directors[i].name;
216 if(i != item.directors.length - 1) {
217 directors += ' / ';
218 }
219
220 }
221
222 // 演员
223 var casts = '';
224 for(var i = 0; i < item.casts.length; i++) {
225 casts += item.casts[i].name;
226 if(i != item.casts.length - 1) {
227 casts += ' / ';
228 }
229
230 }
231
232 newItems.push({
233 id: item.id,
234 title: item.title,
235 genres: genres,
236 cover: item.images.large,
237 score: item.rating.average,
238 directors: directors,
239 casts: casts
240 })
241
242 })
243
244 return newItems;
245 }
246 </script>
247 </body>
248
249</html>
|