Home > Article > Web Front-end > JQuery插件iScroll实现下拉刷新，滚动翻页特效_jquery

JQuery插件iScroll实现下拉刷新，滚动翻页特效_jquery

WBOYOriginal: 2016-05-16 16:43:351727browse

JQuery插件：iScroll

页面布局：

翻页，是通过ajax请求，把页码传入一般处理程序，在一般处理程序中获得分页后的数据返回json数组对象。

下拉刷新：

/**
  * 下拉刷新 （自定义实现此方法）
  * myScroll.refresh(); // 数据加载完成后，调用界面更新方法
  */
  function pullDownAction() {
   setTimeout(function () { 
    var el, li, i;
    el = document.getElementById('thelist');
    //==========================================
    $.ajax({
     type: "GET",
     url: "LoadMore.ashx",
     data: { page: generatedCount },
     dataType: "json",
     success: function (data) {
      var json = data;
      $(json).each(function () {
       li = document.createElement('li');
       // li.innerText = 'Generated row ' + (++generatedCount);
       li.innerHTML = '';
       el.insertBefore(li, el.childNodes[0]);
      })
     }
    });
    myScroll.refresh(); //数据加载完成后，调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)
   }, 1000);  // <-- Simulate network congestion, remove setTimeout from production!
  }

上拉刷新

function pullUpAction() {
   setTimeout(function () {  
    var el, li, i;
    el = document.getElementById('thelist');
    //==========================================
    $.ajax({
     type: "GET",
     url: "LoadMore.ashx",
     data: { page: generatedCount },
     dataType: "json",
     success: function (data) {
      var json = data;
      $(json).each(function () {
       li = document.createElement('li');
       //  li.innerText = 'Generated row ' + (++generatedCount);
       li.innerHTML = ';     
       el.insertBefore(li, el.childNodes[0]);
      })
     }
    });
    //============================================
    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,
    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')) {
      pullUpEl.className = 'loading';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
      pullUpAction(); // Execute custom function (ajax call?)
     }
    }
   });
   setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  }
  //初始化绑定iScroll控件 
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  document.addEventListener('DOMContentLoaded', loaded, false);

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法_jqueryNext article：教你用AngularJS框架一行JS代码实现控件验证效果_AngularJS

See more

JQuery插件iScroll实现下拉刷新，滚动翻页特效_jquery

Related articles