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

mui是一个类似于原生的UI框架，使用它可以实现更多接近原生的功能。今天要讲的是mui的分页功能(上拉加载)：

1、首页需要引入mui.js这个去官网可以下载的

2、需要用mui标签将大的盒子包裹起来：

//这个就是需要包裹的盒子

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框架实现分页功能，

搜索列表