mui手机端页面下拉刷新，上拉刷新

最近套了一个手机端的页面，关于页面上列表形式展现的数据，数据太多，为了优化操作体验，使用了mui下拉刷新的功能，这里将这个模板功能记录下来，方便以后参考。

1.使用mui的下拉刷新，最基本的要引入mui的样式和js
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>

2.将标准的dom放入jsp中，注意<ul>标签里面的内容是动态拼出来的，我这里注释了一条，目的是为了标明固定li标签里的class，方便后面动态拼接的时候对应

<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id="dbfl">
                    <!-- <li class="mui-table-view-cell"> -->
                       <!-- <a href="" class="mui-navigate-right">这里要放拼接的html</a> -->
                    <!-- </li> -->
				</ul>
			</div>
		</div>
		
</body>

3.写js绑定事件

<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					var i = cells.length;  //查询页面上的数据有多少条
					addpjnr(i,i+2);  //每次下拉，在原来的基础上增加2条
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					var i = cells.length;  //查询页面上的数据有多少条
					addpjnr(i,i+2);  //每次上拉，在原来的基础上增加2条
				}, 1500);
			}
			// 监听tap事件，解决 a标签 不能跳转页面问题
			mui('body').on('tap','a',function(){
				document.location.href=this.href;
			});
			$(document).ready(function(){
				addpjnr(0,10);  //初始化的时候先加载10条数据
			});
			/**
			 * 在上拉和下拉时，需要拼接的html，后台动态从数据库中查找，index,size表示后台查询的起始数据和查询条数
			 */
			function addpjnr(index,size){
				$.ajax({
					type : 'post',
					url : '${ctx}/abc.action?method=abc',  
					data : {
						startIndex : index,
						pageSize : size
					},
					async : true,
					dataType : 'json',
					success : function(msg) {
						var formlist = msg.data;
						if(formlist.length>0){
							for (var i = 0; i < formlist.length; i++) {
								if(formlist.length > 0){
								var Dhao  = "'";
								var tet='<li class="mui-table-view-cell mui-media">';
									tet+='<a class="flex" href="aaa.action?method=bbb&lx='+formlist[i].lx+'" >';  //这里注意，不能使用点击事件跳转，只能用a标签跳转
									tet+='    <div class="iconDiv linear-blue">';
									tet+='       <span class="iconfont icon-xuexiao icon_style"></span>';
									tet+='    </div>';
									tet+='    <div class="mui-media-body">';
									tet+='         <h2>'+formlist[i].ywlx1+'</h2>';
									tet+='         <p class="mui-ellipsis">'+formlist[i].title+'</p>';
									tet+='    </div>';
									tet+='    <div class="right_data">';
									tet+='       <p>'+formlist[i].sendtime.substr(0,16)+'</p>';
									tet+='       <span class="mui-badge mui-badge-danger badge_style1">'+formlist[i].num+'</span>';
									tet+='    </div>';
									tet+=' </a>';
									tet+='</li>';
									$("#dbfl").append(tet);						
								}	
							}	
						}	
					},
					error : function(
							XMLHttpRequest,
							textStatus, errorThrown) {
					}
				});
			}
</script>

来源：CSDN

作者：吴举人

链接：https://blog.csdn.net/qq_40393093/article/details/103480785

标签

mui

手机功能