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




	
		
		搜索列表
		
		
		
		
		
		
	

	
		
		

你可能感兴趣的:(mui,前端技术)