上拉刷新和下拉加载_监听div框上拉下拉

作者：秋刀鱼在做梦 | 2024-08-21 00:00:02

踩

监听div框上拉下拉

上拉刷新和下拉加载都是由主容器和子容器组成。子容器在父容器中运动。

在父容器中预加载子容器，然后在子容器中初始化预加载参数。

注意：为了保证IOS和Android平台的一直性，统一采用相同的Dom结构！

父页面~~~


<body>
	<div class="mui-content"></div>
</body>
<script type="text/javascript">
	/**
	 * 下拉刷新和上拉加载都由两个webview组成
	 */
	//启用双击监听
	mui.init({
		/*开启双击手势*/
		gestureConfig: {
			doubletap: true
		},
		/*创建子页面*/
		subpages: [{
			url: 'pullrefresh_sub.html',
			id: 'pullrefresh_sub.html',
			styles: {
				top: '45px',
				bottom: '0px',
			}
		}]
	});
	/*contentWebview就是子页面*/
	var contentWebview = null;
	document.querySelector('header').addEventListener('doubletap', function() {
 
		if(contentWebview == null) {
			contentWebview = plus.webview.currentWebview().children()[0];
		}
		/*将mui语法转换成js进行执行*/
		contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
	});
</script>

子页面~~~


<body>
<!--为了保证IOS和Android平台的一直性，统一采用相同的Dom结构-->
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--数据列表-->
		<ul class="mui-table-view mui-table-view-chevron">
 
		</ul>
	</div>
</div>
<script>
	mui.init({
		pullRefresh: {
			container: '#pullrefresh',
			down: {
				callback: pulldownRefresh
			},
			up: {
				contentdown: "",
				contentrefresh: '诚信 精品 正品',
				contentnomore: "",
				callback: pullupRefresh
			}
		}
	});
	/**
	 * 下拉刷新具体业务实现
	 */
	function pulldownRefresh() {
		setTimeout(function() {
			var table = document.body.querySelector('.mui-table-view');
			var cells = document.body.querySelectorAll('.mui-table-view-cell');
			/*每次下拉刷新新增5个元素*/
			for(var i = cells.length, len = i + 5; i < len; i++) {
				/*创建元素*/
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell';
				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
				//下拉刷新，新纪录插到最前面；  
				table.insertBefore(li, table.firstChild);
			}
			//完成刷新
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
		}, 1500);
	}
 
	var count = 0;
	/**
	 * 上拉加载具体业务实现
	 */
	function pullupRefresh() {
		setTimeout(function() {
			/*上拉加载四次后就不能在加载了*/
			mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 4)); //参数为true代表没有更多数据了。
			var table = document.body.querySelector('.mui-table-view');
			var cells = document.body.querySelectorAll('.mui-table-view-cell');
			/*因为每次加载子页面都会先运行pullupRefresh(),所以初始化数量由函数控制*/
			for(var i = cells.length, len = i + 15; i < len; i++) {
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell';
				li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
				/*在末尾添加元素*/
				table.appendChild(li);
			}
		}, 1500);
	}
	
	
	/*判断plus环境*/
	if(mui.os.plus) {
		mui.plusReady(function() {
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().pullupLoading();
			}, 1000);
 
		});
	} else {
		mui.ready(function() {
			mui('#pullrefresh').pullRefresh().pullupLoading();
		});
	}  
</script>
</body>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/1008971