jquery 和 mui 上拉加載

時間 2019-11-21

標籤 jquery mui 加載欄目 JQuery 简体版

原文原文鏈接

jquery：javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
    </head>
    <link rel="stylesheet" type="text/css" href="dropload.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="dropload.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        li{
            list-style: none;
            width: 100%;
            height: 20px;
            background-color: #FF6000;
            color:#fff;
            font-size: 18px;
            line-height: 20px;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
    <body>
        <div id="load-block">
            <ul ></ul>
        </div>
        <script>
            var index = 0; //起始獲取數據的下標
            var maxLength = 93; // 假設服務器返回100個數據
            var length = 10; //假設每次獲取10條數據
            $('#load-block').dropload({
                scrollArea : window,
                loadDownFn : function(me){
                    require(me);
                }
            });
            function require(me){
                var i = 0;
                for(i = index ;i < index + length;i++){
                    if(i > maxLength){
                        me.lock();  //me.unlock();解鎖
                        me.noData(); //me.noData(false);有數據顯示加載信息
                    }else{
                        var innerHtml = "<li>我是第" + i +"條數據</li>";
                        $(innerHtml).appendTo($("ul"));
                    }
                }
                if(i == (index + length)){
                    index += length;
                }
                setTimeout(function(){
                    me.resetload(); //刷新
                    $(window).scroll(); //防止pc端界面一直處於底部，致使沒有滑動，沒法加載。
                },2000);  //2000的延時是模擬服務器端響應的時間。
            }
        </script>
    </body>
</html>

mui ：css

<!DOCTYPE html>
<html>
    <h1ead>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="mui.css"/>
        <script src="mui.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="pullrefresh.js" type="text/javascript" charset="utf-8"></script>
    </h1ead>
    <body>
        <div class="mui-content">
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
            <h1>花費大概和發達國家和房東</h1>
        </div>
        <div id="refresh"></div>
        <script>
            mui.init({
                  pullRefresh : {
                container:"#refresh",//待刷新區域標識，querySelector能定位的css選擇器都可，好比：id、.class等
                up : {
                      height:0,//可選.默認50.觸發上拉加載拖動距離
                      auto:false,//可選,默認false.自動上拉加載一次
                      contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
                      contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
                      callback :function(){
                          //ajax 每一次請求都須要加：mui('#pullrefresh').pullRefresh().endPullupToRefresh();好比：mui('#pullrefresh').pullRefresh().endPullupToRefresh(response.data.data.length < 4);

　　　　　　　　　　　　　　　　} 

//必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；  } } }); </script> </body> </html>

mui('#pullrefresh').pullRefresh().pullupLoading(); //自動上拉加載一次，做用和init中auto的做用同樣。
mui('#pullrefresh').pullRefresh().refresh(true); // 若是有tab類別切換時，刷新一次
mui('#pullrefresh').pullRefresh().scrollTo(0,0,100); // tab欄切換的時候，列表置頂html

github：https://github.com/WangChangyao/-.gitjava

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。