iscroll5 上下拉动刷新

最新推荐文章于 2024-04-18 09:34:06 发布

放下丶追寻

最新推荐文章于 2024-04-18 09:34:06 发布

阅读量8.2k

点赞数

分类专栏： javascript isScroll5 上下拉动刷新文章标签：源码 css3 用户体验 HTML Android

本文链接：https://blog.csdn.net/lixin1639790/article/details/26489357

版权

javascript isScroll5 上下拉动刷新专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这我不想说其他写的如何如何，虽然本人不是很会css3，但是修改倒是没问题网上说的iscroll5全改了从4升级5要改动内部代码。

我了个神，修改别人的ok的源码万一哪天又要更谁知道你改的那个。

这个iscroll5的示例包本身就不用改，就能支持上下拉动刷新只不过导入的不是基础的iscroll.js，导入的是iscroll-probe.js

我这里用的jquery是1.8 至于css什么的别关心了，只是把别人写好的拿来改改增强用户体验而已。别说什么

topOffset 这个属性没有什么的，我这就ok。

网上写的拉动刷新是由bug的，当拉动后在快速接着拉动，这时候会执行两次刷新方法和动画我这里解决了这问题

当然我试过修改isScroll.options.xxx属性想禁止滚动。等待我开启滚动。

记住导入isScroll5的js是iscroll-probe.js

  var myScroll;
        var pullDownEl, pullDownL;
        var pullUpEl, pullUpL;
        var Downcount = 0 ,Upcount = 0;
        var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
        function pullDownAction() {//下拉事件
       		setTimeout(function() {
       			var el, li, i;
        		el = $('#add');
        		for (i = 0; i < 3; i++) {
        			li = $("<li></li>");
        			Downcount++;
        			li.text('new Add ' + Downcount + " ！");
        			el.prepend(li);
        		}
        		pullDownEl.removeClass('loading');
        		pullDownL.html('下拉显示更多...');
        		pullDownEl['class'] = pullDownEl.attr('class');
        		pullDownEl.attr('class','').hide();
        		myScroll.refresh();
        		loadingStep = 0;
        	}, 1000); //1秒
        }
        function pullUpAction() {//上拉事件
        	setTimeout(function() {
        		var el, li, i;
        		el = $('#add');
        		for (i = 0; i < 3; i++) {
        			li = $("<li></li>");
        			Upcount++;
        			li.text('new Add ' + Upcount + " ！");
        			el.append(li);
        		}
        		pullUpEl.removeClass('loading');
        		pullUpL.html('上拉显示更多...');
        		pullUpEl['class'] = pullUpEl.attr('class');
            	pullUpEl.attr('class','').hide();
        		myScroll.refresh();
        		loadingStep = 0;
        	}, 1000);
        }

        function loaded() {
        	pullDownEl = $('#pullDown');
        	pullDownL = pullDownEl.find('.pullDownLabel');
        	pullDownEl['class'] = pullDownEl.attr('class');
        	pullDownEl.attr('class','').hide();
        	
        	pullUpEl = $('#pullUp');
        	pullUpL = pullUpEl.find('.pullUpLabel');
        	pullUpEl['class'] = pullUpEl.attr('class');
        	pullUpEl.attr('class','').hide();
        	
        	myScroll = new IScroll('#content', {
        		probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
        		scrollbars: true,//有滚动条
        		mouseWheel: true,//允许滑轮滚动
        		fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
        		bounce:true,//边界反弹
        		interactiveScrollbars:true,//滚动条可以拖动
        		shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
        		click: true ,// 允许点击事件
        		keyBindings:true,//允许使用按键控制
        		momentum:true// 允许有惯性滑动
        	});
        	//滚动时
        	myScroll.on('scroll', function(){
        		if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){
					if (this.y > 5) {
						//下拉刷新效果
						pullDownEl.attr('class',pullUpEl['class'])
						pullDownEl.show();
						myScroll.refresh();
						pullDownEl.addClass('flip');
						pullDownL.html('准备刷新...');
						loadingStep = 1;
					}else if (this.y < (this.maxScrollY - 5)) {
						//上拉刷新效果
						pullUpEl.attr('class',pullUpEl['class'])
						pullUpEl.show();
						myScroll.refresh();
						pullUpEl.addClass('flip');
						pullUpL.html('准备刷新...');
						loadingStep = 1;
					}
        		}
        	});
        	//滚动完毕
        	myScroll.on('scrollEnd',function(){
        		if(loadingStep == 1){
	        		if (pullUpEl.attr('class').match('flip|loading')) {
	   					pullUpEl.removeClass('flip').addClass('loading');
						pullUpL.html('Loading...');
						loadingStep = 2;
	       				pullUpAction();
	        		}else if(pullDownEl.attr('class').match('flip|loading')){
	        			pullDownEl.removeClass('flip').addClass('loading');
	        			pullDownL.html('Loading...');
	        			loadingStep = 2;
						pullDownAction();
	        		}
        		}
        	});
        }


        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

css,还是原封不动的

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-ms-touch-action: none;
}

body,ul,li {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-size: 12px;
	font-family: ubuntu, helvetica, arial;
	overflow: hidden;
	/* this is important to prevent the whole page to bounce */
}

#header {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	line-height: 45px;
	background: #CD235C;
	padding: 0;
	color: #eee;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}

#footer {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 48px;
	background: #444;
	padding: 0;
	border-top: 1px solid #444;
}

#content {
	position: absolute;
	z-index: 1;
	top: 45px;
	bottom: 48px;
	left: 0;
	width: 100%;
	background: #ccc;
	overflow: hidden;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

#scroller ul {
	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;
}
#pullDown,#pullUp {  
    height: 40px;  
    line-height: 40px;  
    padding: 5px 10px;  
    font-weight: bold;  
    font-size: 14px;  
    color: #888;  
}  
  
#pullDown .pullDownIcon,#pullUp .pullUpIcon {  
    display: block;  
    float: left;  
    width: 40px;  
    height: 40px;  
    background: url(img/pull-icon@2x.png) 0 0 no-repeat;  
    -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);  
}  
  
#pullDown.flip .pullDownIcon {  
    -webkit-transform: rotate(-180deg) translateZ(0);  
}  
  
#pullUp.flip .pullUpIcon {  
    -webkit-transform: rotate(0deg) translateZ(0);  
}  
  
#pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon {  
    background-position: 0 100%;  
    -webkit-transform: rotate(0deg) translateZ(0);  
    -webkit-transition-duration: 0ms;  
    -webkit-animation-name: loading;  
    -webkit-animation-duration: 2s;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-timing-function: linear;  
}  
  
.-webkit-keyframes loading {  
    from {   
        -webkit-transform:rotate(0deg)translateZ(0);  
    }  
  
    .to {  
        -webkit-transform: rotate(360deg) translateZ(0);  
    }  
}

html代码块

<body οnlοad="loaded()">
	<div id="header">iScroll</div>

	<div id="content">
		<div id="scroller">
			<div id="pullDown" class="ub ub-pc c-gra">
				<div class="pullDownIcon"></div>
				<div class="pullDownLabel">下拉刷新</div>
			</div>
			<ul id="add">
				<li>Pretty row 1</li>
				<li>Pretty row 2</li>
				<li>Pretty row 3</li>
				<li>Pretty row 4</li>
				<li>Pretty row 5</li>
				<li>Pretty row 6</li>
				<li>Pretty row 7</li>
				<li>Pretty row 8</li>
				<li>Pretty row 9</li>
				<li>Pretty row 10</li>
				<li>Pretty row 11</li>
				<li>Pretty row 12</li>
				<li>Pretty row 13</li>
				<li>Pretty row 14</li>
				<li>Pretty row 15</li>
				<li>Pretty row 16</li>
				<li>Pretty row 17</li>
				<li>Pretty row 18</li>
				<li>Pretty row 19</li>
				<li>Pretty row 20</li>
				<li>Pretty row 21</li>
				<li>Pretty row 22</li>
				<li>Pretty row 23</li>
				<li>Pretty row 24</li>
				<li>Pretty row 25</li>
				<li>Pretty row 26</li>
				<li>Pretty row 27</li>
				<li>Pretty row 28</li>
				<li>Pretty row 29</li>
				<li>Pretty row 30</li>
				<li>Pretty row 31</li>
				<li>Pretty row 32</li>
				<li>Pretty row 33</li>
				<li>Pretty row 34</li>
				<li>Pretty row 35</li>
				<li>Pretty row 36</li>
				<li>Pretty row 37</li>
				<li>Pretty row 38</li>
				<li>Pretty row 39</li>
				<li>Pretty row 40</li>
				<li>Pretty row 41</li>
				<li>Pretty row 42</li>
				<li>Pretty row 43</li>
				<li>Pretty row 44</li>
				<li>Pretty row 45</li>
				<li>Pretty row 46</li>
				<li>Pretty row 47</li>
				<li>Pretty row 48</li>
				<li>Pretty row 49</li>
				<li>Pretty row 50</li>
			</ul>
			<div id="pullUp" class="ub ub-pc c-gra">
				<div class="pullUpIcon"></div>
				<div class="pullUpLabel">上拉显示更多...</div>
			</div>
		</div>
	</div>

	<div id="footer"></div>

</body>