今天做前端下拉刷新,要了我的老命
首先這個東西在瀏覽器上就可以測試,如果報錯了那就是寫的可能存在問題
其次,不需要引用亂七八糟的js和css 只需要有一個默認的mui.js mui.css 或者mui.min.js mui.min.css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title></title> 7 <link href="css/mui.min.css" rel="stylesheet" /> 8 <script src="js/mui.min.js"></script> 9 10 </head> 11 <body> <!-- 下拉刷新容器 這兩個div盡量固定,如果只是安卓使用的話無所謂,自己指定div也行 --> 12 <div id = "refresh" class="mui-content mui-scroll-wrapper"> 13 <div class="mui-scroll"> 14 33 15 </div> 16 </div> 17 <script type="text/javascript" charset="utf-8"> 18 mui.init({ 19 pullRefresh : { 20 container:"#refresh",//下拉刷新容器標識，querySelector能定位的css選擇器均可，比如：id、.class等 21 down: {//下拉刷新 22 height: 50,//可選,默認50.觸發下拉刷新拖動距離, 23 auto: false,//可選,默認false.首次加載自動下拉刷新一次 24 contentdown: "下拉可以刷新",//可選，在下拉可刷新狀態時，下拉刷新控件上顯示的標題內容 25 contentover: "釋放立即刷新",//可選，在釋放可刷新狀態時，下拉刷新控件上顯示的標題內容 26 contentrefresh: "正在刷新...",//可選，正在刷新狀態時，下拉刷新控件上顯示的標題內容 27 callback: function () {//必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； 28 getInfosrefresh() 29 } 30 }, 31 up: {//上拉加載 32 height: 50,//可選.默認50.觸發上拉加載拖動距離 33 auto: false,//可選,默認false.自動上拉加載一次 34 contentrefresh: "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容 35 contentnomore: '沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容； 36 callback: async function () {//必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； 37 mui.alert("上拉加載了") 38 this.endPullupToRefresh(true);//沒有數據 39 } 40 } 41 } 42 }); 43 function getInfosrefresh(){ 44 setTimeout(nextRefresh, 1000); 45 } 46 function nextRefresh (){ 47 mui('#refresh').pullRefresh().endPulldownToRefresh(); 48 } 49 </script> 50 </body> 51 </html>
要注意的地方:
1 下拉刷新容器 : 封裝的原因,如果雙系統使用的情況下,容器用默認的這個,就是現在的兩個div,需要刷新的值寫在里面的div里面,可以新建div,無所謂的 ,如果自己指定div,ios會有問題
2 高度 : 注意,寫高度的時候如果寫了px,會出現一個意外的問題,比如初始刷新之后不能刷新,或者上下不能滑動的bug 所以要注意不要寫px,只需要寫數字
3 callback屬性 : 這是一個必選屬性,同時不能直接寫下面要調用的函數名字,需要寫一個匿名函數(像現在這樣),在匿名函數中調用新的函數,或者直接在匿名函數中寫需要的數據請求,
不按照這樣寫,會報endPulldownToRefresh is not a function
或者 endPulldown is not a function 等類似的錯誤