mui下拉刷新下拉加載

時間 2020-05-29

標籤 mui 下拉刷新加載简体版

原文原文鏈接

本身試驗過的複製過去修改一下mui.js路徑能夠直接用javascript

HTML代碼：css

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 <link rel="stylesheet" href="mui/css/mui.css"/>
 <title>個人報修工單</title>
 </head>
 <body>
 <script src="js/jQuery-1.11.1-min.js"></script>


<div id="tv" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<ul style="padding: 3px 0 3px 0">
<div class="weui-actionsheet__cell" style="padding: 2px 0 2px 0">
<h4>個人工單列表</h4>
</div>
<div class="" style="background: #666;height: 200px;;">
    
</div>
<div class="" style="background: #999;height: 200px;;">
    
</div>
<div class="" style="background: #000;height: 100px;;">
    
</div>
</ul>
<ul class="mui-table-view" id="wx_ul">
<!-- 動態加載數據 -->


</ul>
</ul>
</div>
</div>
<!--    ############ 分割線  #############     -->
<div id="dialogs">
 <!--BEGIN error-->
        <div class="js_dialog" id="error" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__bd">系統錯誤</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
                </div>
            </div>
        </div>
 <!--END error-->


 <!--BEGIN loadError-->
        <div class="js_dialog" id="loadError" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog"> 
                <div class="weui-dialog__bd">加載數據發生錯誤</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
                </div>
            </div>
        </div>
 <!--END loadError-->
 </div> 



 </body>
  </html>

js代碼：html

<script type="text/javascript" src="mui/js/mui.min.js"></script>
 <script>

mui.init({
swipeBack : false,//側滑返回組件
pullRefresh : {

container : '#tv', //一個功能的一部分
down : {
callback : pulldownRefresh,//callback事件回調冒號後面就是方法
height : 60,
auto : false,
contentdown : "下拉能夠刷新",
},
up : {
height : 50,
auto : false,
contentrefresh : "正在加載...",
contentnomore : '沒有更多數據了',
callback : pulluptoRefresh
}
}
});

$("#wx_ul").on('tap', 'a', function (event) {//這很重要！！！
// console.log("ss");//mui框架下拉刷新上拉加載，click事件無效的解決方法
this.click();//我有一篇專門寫這個小問題。
});

//下拉刷新
function pulldownRefresh() {
setTimeout(function() { //三秒後執行函數
window.location.reload();//刷新
mui('#tv').pullRefresh().endPulldownToRefresh(); //用來中止刷新
}, 2000);
}
//上拉加載
function pulluptoRefresh() {
setTimeout(function() { //2秒後執行函數
console.log(1);//上拉加載 這是我其餘js裏面寫的方法，我這裏調用就好了。 
//mui('#tv').pullRefresh().endPullupToRefresh(true);//true加載的那個會變成，沒有更多數據了
mui('#tv').pullRefresh().endPullupToRefresh(false);
}, 1000);
//這裏無關緊要，本身根據本身的狀況。 
// setTimeout(function() { //3秒後執行函數
// //中止刷新（加載）
// mui('#tv').pullRefresh().endPullupToRefresh(false);
// }, 4000);
}



 </script>

有問題請留言：java

詳細介紹：https://blog.csdn.net/qq_36073929/article/details/53905842app

--------------------------------請多多指教框架

相關標籤/搜索

每日一句

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