JQuery插件：iScroll

页面布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="wrapper">
  <div id="scroller">
   <div id="pullDown">
    <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</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 class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
   </div>
  </div>

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

下拉刷新：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
  * 下拉刷新 （自定义实现此方法）
  * 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!
  }

上拉加载更多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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.insertAfter(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!
  }

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
  * 初始化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);

转载于:https://www.cnblogs.com/hgbgfg/p/5459029.html

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

  1. AngularJS封装指令实现下拉刷新自动翻页加载数据

    目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下. 滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight. 一.不适用Jqu ...

  2. 好快, 1分钟写好下拉刷新,滚动加载自动分页列表

    前言 欢迎关注BUI Webapp专栏 或者 bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架 微信Webapp开发的各种变态路由需求及解决办法! [BUI实战 ...

  3. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head><meta charset="utf-8"><me ...

  4. jquery手机端页面下拉刷新，上划加载更多

    手机页面下拉刷新,上划加载更多,IOS不能下拉的问题解决 -转圈的是需要引用样式,代码删除了 上划加载时的样子 <script type="text/javascript"& ...

  5. （仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据

    文章目录 一.点击过的新闻列表文字变灰 效果图 实现思路 导入ormlite数据库类依赖 利用ormlite创建数据库和表 创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...

  6. flutter刷新页面_Flutter 页面下拉刷新和上拉加载

    flutter_easyrefresh 正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件.它的功能与Android的 ...

  7. PullToRefreshListView下拉刷新与上拉载入

    [声明]转载请注明出处.此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail --尊重作者.知识无价.交流无限! 前言:下拉刷新是Android项目中常常要用到的东 ...

  8. AUI tab实现页签滑动切换且下拉刷新（下拉固定title栏及tab栏）

    声明:菜鸟一枚,入坑不久,如有欠缺,望大神给予好的建议,完善优化,分享他人. AUI tab实现页签滑动切换且下拉刷新(下拉固定title栏及tab栏) 1:aui tab分页签,手动侧滑或点击TAB ...

  9. 微信小程序页面事件 - 下拉刷新与上拉触底

    一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新 启用下拉刷新有两种方式: ①全局开启下拉刷新 在 app.j ...

  10. 【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件

    1.下拉刷新事件 1. 什么是下拉刷新 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新 启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...

最新文章

  1. tf.reduce_sum()_tf.reduce_mean()_tf.reduce_max()
  2. NowCoder110E Pocky游戏 状压DP
  3. Algorithms_二叉树的前序遍历、中序遍历、后续遍历(深度优先）
  4. 计算机视觉与深度学习 | 粒子群算法与遗传算法(GA)及与蚁群算法(ACO)比较
  5. mysql常用函数 [转]
  6. SAP Spartacus master branch for 4.0 无法使用 yarn build
  7. 1380C. Create The Teams
  8. 【转】【Java/Android】Toast使用方法大全
  9. 三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数(day4)
  10. php去掉 部分字符，输出,php如何去除某个字符
  11. 运维自动化之ansible playbook安装mysql
  12. 电子技术专业基础与实务（中级）考试经验
  13. python飞机大战类_500行代码，教你用python写个微信飞机大战
  14. 【最优化导论】一维搜索方法
  15. psd转html的素材,Ai转PSD格式完美保留图层脚本插件
  16. c语言如何输入数字,请问如何在C语言中输入数字获得拼音？
  17. ChatGPT版微信个人号搭建流程
  18. 笔记：STM32的ADC参考电压与参照电压（电源监测）
  19. 【金融项目】尚融宝项目（十六）
  20. Netty的深入浅出--79.Netty官方Reference Counted Objects文档说明

热门文章

  1. GridView 换行设置
  2. 3个开源TTS（五）eSpeak1.06的源码调试分析
  3. Dataset增加行数据及常用方法
  4. maven项目添加新dependency jar后本地可正常运行，但打包后加载不上
  5. MySQL 常用函数大全
  6. 使用JAVA的keytool生成jks证书,通过jks证书生成pfx证书，tomcat配置https
  7. 使用Python将Excel文件中的数据插入MySQL数据库，你学会了吗？
  8. oracle 12.1.0.1.0,oracle_linux安装oracle_12.1.0
  9. python怎么一次输入两个数_python如何一次性输入多个数
  10. 13. Django基础：admin后台管理