iscroll.js滚动加载实例详解


Posted in Javascript onJuly 18, 2017

滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的。

首先是html结构:

<div class=" saleRecord panelList clear" style="position:relative;height:400px;"> 
          <div id="wrapper"> 
            <div id="scroller"> 
              <ul id="thelist"> 
          @foreach (var item in ViewBag.***) 
          { 
            if (item.IsPay == true) 
            { 
              <li> 
          <div class="panelListItemForALL"> 
            <table class="allRecordTable"> 
              <tbody> 
                <tr> 
                  <td>***</td> 
                  <td>@item.***</td> 
                </tr> 
                <tr> 
                  <td>***</td> 
                  <td>@item.***</td> 
                </tr> 
                <tr> 
                  <td>***</td> 
                  <td>@item.***</td> 
                </tr> 
              </tbody> 
            </table> 
          </div> 
              </li>  
            } 
          } 
              </ul> 
              <div id="more">加载更多</div> 
          </div> 
        </div>

然后是css样式:

#wrapper { 
  position: absolute; 
  z-index: 1; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  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; 
} 
#more 
    { 
      text-align:center; 
    }

需要的话,给父元素套上position:relative属性
最后是脚本中的初始化和获取数据:

var pagenum = 1, update = true, id=ID; 
    var myScroll; 
    setTimeout(function(){ 
      myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true }); 
      myScroll.on('scrollEnd', function () { 
        //console.log(this.y +"|||"+this.maxScrollY); 
        //如果滑动到底部,则加载更多数据(距离最底部10px高度) 
        if ((this.y - this.maxScrollY) == 0) { 
          getMore(); 
        } 
      }); 
    },100 ); 
     
    function getMore() { 
      var that = document.getElementById("more"); 
      pagenum++; 
      $.ajax({ 
        url: '/***/getPage', 
        data: {'currentPage':pagenum,'id':id}, 
        type: 'POST', 
        datatype: "json", 
        success: function (data) { 
          //alert(data); 
          var list = data.List; 
          if (list.length < 1) { 
            pagenum--; that.innerHTML = "已经没有更多了..."; return; 
          } 
          var ul = document.getElementById("thelist"); 
          for (var i = 0; i < list.length; i++) { 
            var str = "<li>"; 
            str += "<div class=\"panelListItemForALL\"><table class=\"allRecordTable\"><tbody><tr><td>***</td><td>"+list[i].OrderCode+"</td>"; 
            str += "</tr><tr><td>***</td><td>"+list[i].GoodsName+"</td></tr>"; 
            str += "<tr><td>***</td><td>"+ data.DatatimeArray[i] +"</td>"; 
            str += "</tr></tbody></table></div>"; 
            str += "</li>"; 
            ul.innerHTML += str; 
            myScroll.refresh(); 
          } 
        } 
      }); 
 
    }

把相应的数据填充进去就好,当然控制器里要写一个分页获取数据的方法,通过这里的ajax获取。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 #Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 #jQuery
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 #Javascript
iscroll动态加载数据完美解决方法
Jul 18 #Javascript
Angular4学习笔记之新建项目的方法
Jul 18 #Javascript
详解使用nvm安装node.js
Jul 18 #Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
You might like
PHP array操作10个小技巧分享
2011/06/23 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
python虚拟环境virualenv的安装与使用
2016/12/18 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
Linux Interview Questions For software testers
2012/06/02 面试题
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
个人创业事迹材料
2014/12/30 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
文艺演出主持词
2015/07/01 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
pycharm无法安装cv2模块问题
2022/05/20 Python