当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQuery插件iScroll实现下拉刷新，滚动翻页特效

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

2019年03月25日  | 移动技术网IT编程  | 我要评论

jquery插件：iscroll

页面布局：

<p id="wrapper">
  <p id="scroller">
   <p id="pulldown">
    <span class="pulldownicon"></span><span class="pulldownlabel">下拉刷新...</span>
   </p>
   <ul id="thelist">
    <li>
     <img src="img/page1_img1.jpg" />
    </li>
    <li>
     <img src="img/page1_img2.jpg" />
    </li>
    <li>
     <img src="img/page1_img3.jpg" />
    </li>
    <li>
     <img src="img/page1_img1.jpg" />
    </li>
    <li>
     <img src="img/page1_img2.jpg" />
    </li>
    <li>
     <img src="img/page1_img3.jpg" />
    </li>
   </ul>
   <p id="pullup">
    <span class="pullupicon"></span><span class="pulluplabel">上拉加载更多...</span>
   </p>
  </p>

翻页，是通过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 = '<img src="' + this.src + '"/>';
       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 = '<img src="' + this.src + '"/>;     
       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);

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网