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数组长度问题代码说明
Jan 20 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
基于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树形结构tree类用法示例
2019/02/01 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python中with及contextlib的用法详解
2017/06/08 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
运动会跳远广播稿
2014/02/04 职场文书
遗嘱格式范本
2015/08/07 职场文书
新年祝酒词大全
2015/08/11 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers