Better-scroll-上拉刷新-下拉加载.html

最新推荐文章于 2024-03-30 18:31:59 发布

导乐符

最新推荐文章于 2024-03-30 18:31:59 发布

阅读量1.5k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_36800701/article/details/81535970

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>better-scroll</title>
<script src="js/bscroll.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	html,
	body{
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.wrap{
		width: 100%;
		height: 300px;
		box-sizing: border-box;
		overflow: hidden;
		background: #ccc;
	}
	.list {
		position: relative;
	}
	.list li {
		width: 100vw;
		height: 50px;
		font: 30px/50px "微软雅黑";
		box-sizing: border-box;
		text-align: center;
		border: 1px solid #000000;
		background: #f1f1f1;
	}
	.pullDown:before,
	.pullUp:after{
		content: attr(data-text);
		width: 100vw;
		height: 50px;
		font: 16px/50px "微软雅黑";
		box-sizing: border-box;
		text-align: center;
		color: #999;
	}
	.pullDown:before{
		position: absolute;
		left: 0;
		top: -50px;
	}
	.tip{
		position: absolute;
		top: -50px;
		left: 0;
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #CC3F6E;
		z-index: 999;
	}
</style>
</head>

<body>
<div class="wrap">
	<div class="box" style="position: relative;">
		<div class="tip">公司Logo之类的</div>
		<ul class="list" data-text = "正在加载..."></ul>	
	</div>
</div>
<script type="text/javascript">

/*
 * 生成元素
 *//
(function(){
	
	let list = document.querySelector(".list");
	let con = document.querySelector(".con");
	let inner = '';
	
	for (var i = 0; i < 10; i++) {
		inner += '<li>'+ i +'</li>';
	}
	list.innerHTML += inner;
	
})();
	
(function(){
	/*
	 * 滑动的是第0个子元素，其实和自己写的是一样的思路，或者说自己和别人是一样的思路
	 * 
	 */
	let wrap = document.querySelector(".wrap");
	let list = document.querySelector(".list");
	let tip  = document.querySelector(".tip");
	
	let bScroll = new BScroll(wrap, {
		scrollY: true,
		pullUpLoad: {
			threshold: 50
		},
		pullDownRefresh: {
			threshold: 50,
			stop: 50
		}
	});
	/*
	 * pullingUp: 监听的应该是，元素滚动过程中，被滚动的那个元素的底边与父级外框底边的距离，如果达到某个值，就执行其回调函数；
	 * finishPullUp: 这个类似控制一个开关，比如在触发pullingUp事件的时候，插件肯定会把一个开关给关掉，防止用户重复上拉
	 *	在数据加载完成以后，需要执行finishPullUp()把开关打开，以便下次可以继续执行上拉刷新；
	 * refresh：其实就是重新计算一下内容的高度和宽度，也许也会计算外框的高度和宽度，因为dom结构发生了变化了，所以宽高要从新计算
	 * 以为整个插件基本上都是在计算一些距离差值，所以肯定需要从新计算的；
	 * 
	 * 虽然没看过源码，但是看过类似的iScroll的教程，自己也写过类似的插件，只不过自己写的插件没那么好用而已；
	 */
	bScroll.on("pullingUp", function(){
		
		console.log('正在加载....');
		list.classList.add("pullUp");
		
		setTimeout(function(){
			var inner = '';
			for (var i=0; i<5; i++) {
				inner += '<li>新增的'+ i +'</li>';
			}
			list.innerHTML += inner;
			this.finishPullUp();
			this.refresh();
			list.classList.remove("pullUp");
			console.log('加载完成');
		}.bind(this),1000);
		
	});
	/*
	 * 下拉更新：
	 * 	下拉更新的触发时机是用户手指抬起的时候触发的，在手指抬起的时候计算滚动元素上边距与父级元素上边距的距离是否大于了threshold，
	 * 	如果大于的话就触发pullingDown的回调函数；
	 * 	stop： 在下拉更新的时候，滚动元素停留在哪个位置，一般都是用来放置提示文字的，比如loading之类的
	 * 	finishPullDown()后就会自动回到0的位置
	 */
	bScroll.on("pullingDown", function(){
		console.log("下拉更新");
		list.classList.add("pullDown");
		tip.style.display = 'none';
		setTimeout(function(){
			var inner = '';
			for (var i=0; i<5; i++) {
				inner += '<li>新增的'+ i +'</li>';
			}
			list.innerHTML = inner + list.innerHTML;
			this.finishPullDown();
			this.refresh();
			list.classList.remove("pullDown");
			setTimeout(function(){
				tip.style.display = 'block';
			},100);
			console.log("下拉更新结束");
		}.bind(this),3000);
	});
	
})();
	
	
</script>
</body>
</html>