首页 > 代码库 > iscroll5 上下拉动刷新
iscroll5 上下拉动刷新
在这我不想说其他写的如何如何,虽然本人不是很会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
[javascript] view plaincopy
- 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,还是原封不动的
[css] view plaincopy
- * {
- -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代码块
[html] view plaincopy
- <body onload="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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。