1. 程式人生 > >MUI下拉重新整理上拉載入實現

MUI下拉重新整理上拉載入實現

DOM結構

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="hui-media-list mui-scroll">
        <ul id="con">   
        </ul>
    </div>
</div>

JS部分

mui.init({
          pullRefresh : {
            container:"#refreshContainer",//下拉重新整理容器標識,querySelector能定位的css選擇器均可,比如:id、.class等
            down:{
                callback :aaa //必選,重新整理函式,根據具體業務來編寫,比如通過ajax從伺服器獲取新資料;
                },
            up: {
                contentrefresh: '正在載入...',
                contentnomore:'沒有更多資料了',
                callback: bbb
                }
          }
        });
        function aaa(){
            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
        }
        function bbb(){
            for (var i=0;i<9;
i++) { $('#con').append('<li>
<a href=""><div class="hui-media-content hui-media-content-left"><h1>標題內容....</h1><p>power by hcoder.net</p></div><div class="hui-media-list-img"><img src="img/資訊科學.jpg" /></div></a></li>
') } this.endPullupToRefresh(true|false); mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); } mui.plusReady(function(){ for (var i=0;i<9; i++) { $('#con').append('<li><a href=""><div class="hui-media-content hui-media-content-left"
>
<h1>標題內容....</h1><p>power by hcoder.net</p></div><div class="hui-media-list-img"><img src="img/資訊科學.jpg" /></div></a></li>') } })