mui下拉刷新下拉加載
阿新 • • 發佈：2019-04-11
pre actions code rap 過去 方法 location 加載數據 prim
自己試驗過的復制過去修改一下mui.js路徑可以直接用
HTML代碼：
<!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代碼：
<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>
有問題請留言：
詳細介紹：https://blog.csdn.net/qq_36073929/article/details/53905842
mui下拉刷新下拉加載