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);
    }