前言：這是最近專案中的一個新聞列表

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