网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JQuery插件iScroll实现下拉刷新，滚动翻页特效
内容
    JQuery插件：iScroll
    页面布局：
    <div id="wrapper">
      <div id="scroller">
       <div id="pullDown">
        <span></span><span>下拉刷新...</span>
       </div>
       <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>
       <div id="pullUp">
        <span></span><span>上拉加载更多...</span>
       </div>
      </div>翻页，是通过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);
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 6:29:40