mui框架实现分页功能（上拉加载，下拉刷新）以及点击事件的实现 - 好文

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);//ajax函数
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; }
6、mui点击事件的实现：
mui('body').on('tap', '.shopList', function() {//.shoplist就是你需要绑定的dom对象 var
ext_id = $(this).attr('ext_id'); console.log(ext_id); mui.openWindow({ url:
"newShop_details.php?ext_id=" + ext_id }) })
7、取消页面的垂直滚动条：
.mui-scrollbar { 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>
</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从服务器获取新数据； } } }); //点击事件 mui('body').on('tap',
'.shopList', function() { var ext_id = $(this).attr('ext_id');
console.log(ext_id); mui.openWindow({ url: "newShop_details.php?ext_id=" +
ext_id }) })

热门工具换一换