MUI下拉重新整理和上拉載入功能
阿新 • • 發佈:2019-02-12
mui.init({ pullRefresh: { container: "#pullrefresh",//下拉載入容器標識,querySelector能定位的css選擇器均可,比如:id、.class等 up:{ style:"cirecle",//必選,下拉重新整理樣式,目前支援原生5+"cirecle"樣式 color:"#2BD009", //可選,預設“#2BD009” 下拉重新整理控制元件顏色 height:50,//可選,預設50.觸發下拉重新整理拖動距離 auto:false,//可選,預設false.首次載入自動上拉重新整理一次 callback:upfunction//必選,重新整理函式,根據具體業務來編寫,比如通過ajax從伺服器獲取新資料; } } });
var _self; if(window.plus) { plusReady(); } else { document.addEventListener("plusready", function() { plusReady(); }, false); } function plusReady() { _self = plus.webview.currentWebview(); _self.setPullToRefresh({ support: true, height: '50px', range: '100px', style: 'circle', offset: '1px' }, pulldownRefresh);//上拉重新整理 plus.key.addEventListener("backbutton",function () { _self.close("auto"); },false); } function downData() { var value=$('<li class="mui-table-view-cell mui-media"><a href="javascript:;">'+ '<img class="mui-media-object mui-pull-left" src="../img/shuijiao.jpg">'+ '<div class="mui-media-body">幸福<p class="mui-ellipsis">能和心愛的人一起睡覺,是件幸福的事情;'+ '可是,打呼嚕怎麼辦?</p></div></a></li>'); $("#three_ul").prepend(value); } function upData() { var value=$('<li class="mui-table-view-cell mui-media"><a href="javascript:;">'+ '<img class="mui-media-object mui-pull-left" src="../img/shuijiao.jpg">'+ '<div class="mui-media-body">幸福<p class="mui-ellipsis">能和心愛的人一起睡覺,是件幸福的事情;'+ '可是,打呼嚕怎麼辦?</p></div></a></li>'); $("#three_ul").append(value); } function pulldownRefresh() { setTimeout(function() { downData(); _self.endPullToRefresh(); }, 1500); } function upfunction(){ setTimeout(function() { upData(); mui('#pullrefresh').pullRefresh().endPullupToRefresh(); }, 1500); }