iscroll实现下拉刷新，上拉加载

最新推荐文章于 2024-04-26 09:05:28 发布

西风XF

最新推荐文章于 2024-04-26 09:05:28 发布

阅读量2.1k

点赞数 1

分类专栏： js 文章标签： iscroll 下拉刷新上拉加载

本文链接：https://blog.csdn.net/qq_36242361/article/details/76131207

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

注：仅个人笔记，若有错误，请指正。若有疑问可相互讨论。

电脑和手机在同一个局域网下，用手机查看效果。

html：

<!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></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrapper">
			<header>header</header>
			<section id="section">
				<div class="scroll-wrapper">
					<p class="ref"><img src="img/1.gif"/>下拉刷新...</p>
					<ul class="ULs">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
						<li>4</li>
						<li>5</li>
						<li>9</li>
						<li>4</li>
						<li>5</li>
					</ul>
					<p class="clickMore"><img src="img/2.gif"/>上拉加载更多..</p>
				</div>
			</section>
			<footer>footer</footer>
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function(){
			var myscroll,
				isPulled = false; // 拉动标记;
			myscroll = new IScroll("#section",{
				probeType:3,
				scrollX: false,
				mouseWheel: true,
				click: true,
				hScrollbar:false
			});
			myscroll.on("scroll",function(){
				var height = this.y;
				var boHeight = this.maxScrollY - height;
				console.log("height:" + height);
	            console.log("maxScrollY:" + this.maxScrollY);
	            console.log("boHeight:" + boHeight);
				// 控制下拉显示
			    if (height >= 20) {
		        	$('.ref').css("display","block");
//		        	setTimeout(function(){
//						$(".ULs").html("<li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li><li>2</li>");
//						myscroll.refresh();
//		        	},1000);
			        return;
			    }
			    else if (height < 20 && height >= 0) {
			        $('.ref').css("display","none")
			        return;
			    }
			    
			    // 控制上拉显示
			    if(boHeight >= 20){
			    	$('.clickMore').css("display","block");
			    	isPulled = true;
			    	return;
			    }else if(boHeight < 20 &&　boHeight>= 0){
			    	$('.clickMore').css("display","none");
			    	return;
			    }
			    
			});
			myscroll.on("scrollEnd",function(){
				if(isPulled){
					isPulled = false;
					//加载数据
					var ht = "<li>10</li><li>10</li>"
					$(".ULs").append(ht);
//					$('.clickMore').html("没有更多数据")
					myscroll.refresh();
				}
			});
			
			document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
			
			$('.clickMore').on('click',function(){
				console.log(12)
			});
		})
	</script>
</html>

reset.css:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* custom */
a {
    color: #7e8c8d;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
}

li {
    list-style: none;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

html, body {
	height:100%;
    width: 100%;
}

body {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

index.css（less编译）:

.wrapper{
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    header{
        height:44px;
        width:100%;
        text-align:center;
        line-height:44px;
    }
    section{
        flex: 1;
        overflow: auto;
        width:100%;
        background-color: gray; 
        .scroll-wrapper{
            position: relative;
            .ref{
                display: none;
                position: absolute;
                top:-20px;
                left: 0;
                width:100%;
                height:20px;
                text-align: center;
            }
            ul{
                width:100%;
                li{
                    height:50px;
                    border-top:1px solid #000;
                    background-color: #f9f9f9;
                }
            }
            .clickMore{
                display: none;
                position: absolute;
                bottom:-20px;
                left: 0;
                padding-top:10px;
                height:20px;
                padding-top: 10px;
                width:100%;
                text-align: center;
            }
        }
    }
    footer{
        height:44px;
        width:100%;
        text-align:center;
        line-height:44px;
    }
}

js文件包括：jquery-2.1.0.js，iscroll-probe.js。