mui框架實現分頁功能
阿新 • • 發佈：2018-11-09
mui是一個類似於原生的UI框架，使用它可以實現更多接近原生的功能。今天要講的是mui的分頁功能（上拉載入）：
1、首頁需要引入mui.js這個去官網可以下載的
2、需要用mui標籤將大的盒子包裹起來：
<div id="refreshContainer" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="shopBox"></div>//這個就是需要包裹的盒子
</div>
</div>3、初始化mui:
mui.init({ pullRefresh: { container: '#refreshContainer', //待重新整理區域標識，querySelector能定位的css選擇器均可，比如：id、.class等 auto: true, // 可選,預設false.自動上拉載入一次 height: 50, up: { callback: function() { pages++; showajax(pages); mui('#refreshContainer').pullRefresh().endPullupToRefresh(); } //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料； } } });
4、判斷有無資料時執行的邏輯：
if(data.result.length > 0) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);//禁止重新整理
} else {
layer.msg("已經到底了");
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);//啟動重新整理
}5、如果想隱藏底部的“沒有更多資料了”，需要在css程式碼中新增一行程式碼：
.mui-pull-bottom-pocket { display: none !important; }
下面是我的一個案例，是在搜尋列表頁面呼叫後臺介面結合mui框架實現分頁功能，
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>搜尋列表</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/common.css" /> <link rel="stylesheet" href="css/mui.min.css"> <link rel="stylesheet" type="text/css" href="css/searchShopList.css" /> </head> <body> <!-----搜尋列表------> <div id="refreshContainer" class="mui-scroll-wrapper"> <div class="mui-scroll"> <div class="shopBox"> <!--<div class="shopList"> <div class="listLeft"> <div class="shopImgBox"> <img src="images/rice2.png"/> </div> </div> <div class="shopMessageBox"> <div class="shopMessage">原裝2017新米生態種植東 北特產5kg真空禮盒包裝</div> <div class="shopPrice">￥18.00</div> </div> </div>--> </div> </div> </div> </body> </html> <script src="js/common.js"></script> <script src="js/config.js"></script> <script src="js/jquery.min.js"></script> <script src="js/layer/layer.js"></script> <script src="js/mui.min.js"></script> <script type="text/javascript"> var winH = $(window).height(); $('.wrapper').height(winH); var shopName = $_GET['shopName']; //獲取商品名 var shopNames = decodeURIComponent(shopName); pages= 1; showajax(pages); function showajax(pages) { layer.ready(function() { layer.load(2); }) $.ajax({ //獲取搜尋的列表資訊 type: "post", dataType: 'json', url: commonsUrl + 'api/gxsc/get/search/commodity/list' + versioninfos, data: { "search": shopNames, //請求引數 商品名 "page": pages, // "ss": getCookie('openid') //請求引數 openid }, success: function(data) { console.log(data) layer.closeAll(); if(data.code == 1) { //請求成功 var con = data.result; if(con.length == 0 && pages == 1) { layer.closeAll(); $('.shopBox').html('<p>抱歉，沒有您搜到您要的商品哦！試試其他商品吧</p>'); $('.shopBox p').css({ 'text-align': 'center', 'color': '#c6bfbf', 'line-height': winH + 'px' }); } else { console.log(con); var html = ''; $.each(con, function(k, v) { var goods_id = con[k].goods_id; //商品id console.log(goods_id); var ext_id = con[k].ext_id; var goods_name = con[k].goods_name; //商品名稱 var image1 = con[k].image; //商品圖片 var price = con[k].price; //商品單價 var market_price = con[k].market_price; //市場價 var spec_name = con[k].spec_name; //規格名稱 html += "<div class='shopList' goods_id=" + goods_id + " ext_id=" + ext_id + "><div class='listLeft'><div class='shopImgBox'><img src=" + image1 + "></div></div><div class='shopMessageBox'><div class='shopMessage'>" + goods_name + "</div><div class='shopPrice'>￥" + price + "</div></div></div>" }); $('.shopBox').append(html); //動態顯示搜尋列表 if(data.result.length > 0) { mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); } else { layer.msg("已經到底了"); mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); } } } else { layer.msg(data.msg); } } }); } mui.init({ pullRefresh: { container: '#refreshContainer', //待重新整理區域標識，querySelector能定位的css選擇器均可，比如：id、.class等 auto: true, // 可選,預設false.自動上拉載入一次 height: 50, up: { callback: function() { pages++; showajax(pages); mui('#refreshContainer').pullRefresh().endPullupToRefresh(); } //必選，重新整理函式，根據具體業務來編寫，比如通過ajax從伺服器獲取新資料； } } });