limq

rainman
随笔 - 19, 文章 - 2, 评论 - 115, 引用 - 1
数据加载中……

MUI 上拉加载 完整实例

 例子是参照网上的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>&nbsp;
 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 - 11- 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>

 

posted on 2018-04-24 15:29 limq 阅读(1061) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: