当前位置：网站首页>iScroll系列之下拉刷新 + 上拉加载更多

iScroll系列之下拉刷新 + 上拉加载更多

2022-08-03 02:18:00 【老__L】

目录

Gtihub地址

1、引入iscroll和jquery-1.8.3.min.js

<!-- 第三方的插件 可以实现上拉加载下拉刷-->
<script type="application/javascript" src="iscroll.js"></script>
<!-- 第三方插件 jquery -->
<script type="application/javascript" src="js/jquery.min.js"></script>

2、编写HTML

<div id="wrapper">
	<div id="scroller">
		<!-- 下拉刷新 -->
		<div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div>
		<!-- ；列表数据 -->
		<ul id="thelist">
			<div class="show_food_list">
				<div class="show_img">
					<img src="images/fd_banner.jpg" alt="" />
				</div>
				<h4>东波四珍之一 ———— 东波肉2</h4>
				<div class="show_data_list">
					<div class="food_data">
						<img src="images/dianzan.png" alt="" />
						<span>1233</span>
					</div>
					<div class="food_data">
						<img src="images/dianzan.png" alt="" />
						<span>1233</span>
					</div>
					<div class="food_data">
						<img src="images/dianzan.png" alt="" />
						<span>1233</span>
					</div>
				</div>
			</div>
		</ul>
		<!-- 上拉加载更多 -->
		<div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span></div>
	</div>
</div>

3、编写CSS，为HTML赋予样式

body, ul, li {
    
	padding: 0;
	margin: 0;
	border: 0;
}
body {
    
	font-size: 12px;
	-webkit-user-select: none;
	-webkit-text-size-adjust: none;
	font-family: helvetica;
}
#header {
    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	line-height: 45px;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
	background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
	padding: 0;
	color: #eee;
	font-size: 20px;
	text-align: center;
}
#header a {
    
	color: #f3f3f3;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
#footer {
    
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
	background-image: -moz-linear-gradient(top, #999, #666 2%, #222);
	background-image: -o-linear-gradient(top, #999, #666 2%, #222);
	padding: 0;
	border-top: 1px solid #444;
}
#wrapper {
    
	position: absolute;
	z-index: 1;
	top: 45px;
	bottom: 48px;
	left: 0;
	width: 100%;
	background: #555;
	overflow: auto;
	background: white;
}
#scroller {
    
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	float: left;
	width: 100%;
	padding: 0;
}
#scroller ul {
    
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: left;
}
#scroller li {
    
	padding: 0 10px;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	background-color: #fafafa;
	font-size: 14px;
}
#scroller li > a {
    
	display: block;
}
/** * * 下拉样式 Pull down styles * */
#pullDown, #pullUp {
    
	background: #fff;
	height: 40px;
	line-height: 40px;
	padding: 5px 10px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	font-size: 14px;
	color: #888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
    
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	-webkit-background-size: 40px 80px;
	background-size: 40px 80px;
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 250ms;
}
#pullDown .pullDownIcon {
    
	-webkit-transform: rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
    
	-webkit-transform: rotate(-180deg) translateZ(0);
}

/* 菜单列表 */
.show_food_list {
    
	width: 100%;
}
.show_food_list .show_img {
    
	height: 9rem;
	width: 17.5rem;
	border-radius: 0.5rem;
	background: red;
	margin: 0 auto;
	overflow: hidden;
	margin-top: 0.5rem;
}
.show_food_list img {
    
	height: 9rem;
	width: 17.5rem;
	text-align: center;
}
.show_food_list h4 {
    
	font-size: 0.7rem;
	text-align: center;
	line-height: 2rem;
}
.show_data_list {
    
	display: flex;
	justify-content: space-between;
	padding: 0 3.5rem;
}
.show_data_list img {
    
	width: 0.75rem;
	height: 0.75rem;
}
.show_data_list .food_data span {
    
	border-right: 1px solid #999;
	padding: 0 0.6rem 0 0.2rem;
	color: #999;
}

4、调用iScroll

var myScroll,
	pullDownEl,
	pullDownOffset,
	pullUpEl,
	pullUpOffset,
	generatedCount = 0;

/** * 下拉刷新 （自定义实现此方法） * myScroll.refresh(); // 数据加载完成后，调用界面更新方法 */
var pullUpIndex = 0; // 设置初始值 （我设置了了pullUpIndex=3的时候不可以上拉加载）

// 上拉重新加载页面
function pullDownAction() {
    
	// 这里写通过ajax 后台后台数据渲染到页面
	setTimeout(function () {
    
		// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById("thelist");
		var result = "";
		for (i = 0; i < 2; i++) {
    
			result += `<div class="show_food_list"> <div class="show_img"> <img src="images/fd_banner.jpg" alt=""> </div> <h4>东波四珍之一 ———— 东波肉2</h4> <div class="show_data_list"> <div class="food_data"> <img src="images/dianzan.png" alt=""> <span>1233</span> </div> <div class="food_data"> <img src="images/dianzan.png" alt=""> <span>1233</span> </div> <div class="food_data"> <img src="images/dianzan.png" alt=""> <span>1233</span> </div> </div> </div>`;
		}
		pullUpIndex = 0;
		$("#thelist").html(result);
		pullUpEl.querySelector(".pullUpLabel").innerHTML = "";

		myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

/** * 滚动翻页 （自定义实现此方法） * myScroll.refresh(); // 数据加载完成后，调用界面更新方法 */
// 上拉加载更多
function pullUpAction() {
    
	// 这里写通过ajax 后台后台数据渲染到页面
	setTimeout(function () {
    
		// <-- Simulate network congestion, remove setTimeout from production!
		var el, li, i;
		el = document.getElementById("thelist");
		var result = "";
		for (i = 0; i < 4; i++) {
    
			result += `<div class="show_food_list"> <div class="show_img"> <img src="images/fd_banner.jpg" alt=""> </div> <h4>东波四珍之一 ———— 东波肉2</h4> <div class="show_data_list"> <div class="food_data"> <img src="images/dianzan.png" alt=""> <span>1233</span> </div> <div class="food_data"> <img src="images/dianzan.png" alt=""> <span>1233</span> </div> <div class="food_data"> <img src="images/dianzan.png" alt=""> <span>1233</span> </div> </div> </div>`;
		}
		$("#thelist").append(result);

		myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}

/** * 初始化iScroll控件 */

function loaded() {
    
	pullDownEl = document.getElementById("pullDown");
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpEl = document.getElementById("pullUp");
	pullUpOffset = pullUpEl.offsetHeight;

	myScroll = new iScroll("wrapper", {
    
		scrollbarClass: "myScrollbar" /* 重要样式 */,
		useTransition: false /* 此属性不知用意，本人从true改为false */,
		topOffset: pullDownOffset,
		// 拖动幅度比较小时候出发的方法
		onRefresh: function () {
    
			if (pullDownEl.className.match("loading")) {
    
				pullDownEl.className = "";
				pullDownEl.querySelector(".pullDownLabel").innerHTML = "下拉刷新...";
			} else if (pullUpEl.className.match("loading")) {
    
				pullUpEl.className = "";
				pullUpEl.querySelector(".pullUpLabel").innerHTML = "上拉加载更多...";
			}
		},
		// 拖动距离比较大的出发的方法
		onScrollMove: function () {
    
			if (this.y > 5 && !pullDownEl.className.match("flip")) {
    
				pullDownEl.className = "flip";
				pullDownEl.querySelector(".pullDownLabel").innerHTML = "松手开始更新...";
				this.minScrollY = 0;
			} else if (this.y < 5 && pullDownEl.className.match("flip")) {
    
				pullDownEl.className = "";
				pullDownEl.querySelector(".pullDownLabel").innerHTML = "下拉刷新...";
				this.minScrollY = -pullDownOffset;
			} else if (this.y < this.maxScrollY - 5 && !pullUpEl.className.match("flip")) {
    
				pullUpEl.className = "flip";
				pullUpEl.querySelector(".pullUpLabel").innerHTML = "松手开始更新...";
				this.maxScrollY = this.maxScrollY;
			} else if (this.y > this.maxScrollY + 5 && pullUpEl.className.match("flip")) {
    
				pullUpEl.className = "";
				pullUpEl.querySelector(".pullUpLabel").innerHTML = "上拉加载更多...";
				this.maxScrollY = pullUpOffset;
			}
		},
		// 放手后的方法
		onScrollEnd: function () {
    
			if (pullDownEl.className.match("flip")) {
    
				pullDownEl.className = "loading";
				pullDownEl.querySelector(".pullDownLabel").innerHTML = "加载中...";
				pullDownAction(); // Execute custom function (ajax call?)
			} else if (pullUpEl.className.match("flip")) {
    
				pullUpIndex++;
				console.log(pullUpIndex);
				pullUpEl.className = "loading";
				if (pullUpIndex < 3) {
    
					pullUpEl.querySelector(".pullUpLabel").innerHTML = "加载中...";
					pullUpAction(); // Execute custom function (ajax call?)
				} else {
    
					pullUpEl.querySelector(".pullUpLabel").innerHTML = "数据已全部加载完毕";
				}
			}
		}
	});

	setTimeout(function () {
    
		document.getElementById("wrapper").style.left = "0";
	}, 800);
}

//初始化绑定iScroll控件
document.addEventListener(
	"touchmove",
	function (e) {
    
		e.preventDefault();
	},
	false
);
document.addEventListener("DOMContentLoaded", loaded, false);

参考文献

  1. 基于iscroll.js的上滑加载更多下拉刷新

后记

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

在这里插入图片描述

原网站

版权声明
本文为[老__L]所创，转载请带上原文链接，感谢
https://felaol.blog.csdn.net/article/details/126130241

边栏推荐

猜你喜欢

随机推荐