MUI上拉加载，下拉刷新

前言：这是最近项目中的一个新闻列表

1.DOM容器

这里只贴主要的代码

        <div id="refreshId" class="mui-content mui-scroll-wrapper" style="background-color:white;">           <div class="mui-scroll">                <ul id="newsMore" class="mui-table-view">                </ul>           </div>        </div>                <script src="js/components/NewsMore.js"></script>                <script src="js/lib/mui/js/mui.min.js"></script>        <script src="js/lib/mui/js/mui.pullToRefresh.js"></script>        <script src="js/lib/mui/js/mui.pullToRefresh.material.js"></script>

JS文件：NewsMore.js
注释说的很清楚，这里不细说

    // 创建新闻列表 newsList：后端传来的新闻数据    var _createNewsMoreList = function (plateType, plateName, newsList) {        var html = '';        var seg2 = '';        for (var i = 0, len = newsList.length; i < len; i++) {            var obj = newsList[i];//<a href="' + BASE_URL + '/nopage_hy.html" unid="' + obj.unid + '">';            seg2 += '<li class="mui-table-view-cell" id="'+obj.unid+'"><a>';            seg2 += '   <span style="font-size:16px;" >' + obj.title + '</span>';            seg2 += '   <label style="float:right;font-size: 14px;color: grey;margin-top:8px;">' + obj.date + '</label>';            seg2 += '</a></li>'        }        html += seg2;        $("#newsMore").append(html);        mui.init({            pullRefresh:{                container:"#refreshId",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等                down: {//下拉刷新                    auto:false,//可选,默认false.自动下拉刷新一次                    height:60,//可选.默认50.触发下拉刷新拖动距离                    contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                    contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                    contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容                    callback: pulldownRefresh//下拉执行的回调函数                },                up: {//上拉加载                    auto:false,//可选,默认false.自动上拉加载一次                    height:150,//可选.默认50.触发上拉加载拖动距离                    contentrefresh: '正在加载...',                   // contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；                    callback: pullupRefresh//上拉执行的回调函数                }            }        });        //解决a标签失效问题        //mui('#refreshId').on('tap', 'a', function () { document.location.href = this.href; });        mui(".mui-table-view").on('tap','.mui-table-view-cell',function(e){              //获取id                //this：指的是点击的class为mui-table-view-cell的标签              var unid = this.getAttribute("id");              //打开新闻详情              mui.openWindow({                   id:'newsDetails',                   url:'newsDetails.html?unid='+unid+"=type="+plateType,              });            })     };        // 下拉刷新具体业务实现    var pulldownRefresh = function() {        window.setTimeout(function() { //0.5秒后执行函数            //刷新数据前清空以前数据            $("#newsMore").empty();            //重新加载数据            //在这个函数里面获取数据后会调用_createNewsMoreList             _getNewsMore(plateType,plateName,num,page);            //停止刷新            mui('#refreshId').pullRefresh().endPulldownToRefresh();            mui.toast('刷新成功');        }, 500);      }    //上拉加载具体业务实现    var pullupRefresh = function(){        window.setTimeout(function() { //0.5秒后执行函数            var start = num+1;//更改数据加载起点  每次只加载20条 append到原有list后面            num+=20;            //重新加载数据            //在这个函数里面获取数据后会调用_createNewsMoreList              _getNewsMore(plateType,plateName,20,start);            //停止加载  false:表示还有数据可以架子啊  true：表示所有数据已经加载完         mui('#refreshId').pullRefresh().endPullupToRefresh(false);            mui.toast('加载成功');        }, 500);    }