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 相关文章推荐
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
原生JS进行前后端同构
Apr 22 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
angular多语言配置详解
May 16 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
图书管理程序(一)
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
菜单效果
2006/10/14 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
python定时截屏实现
2020/11/02 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
英语商务邀请函范文
2014/01/16 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
高三学习决心书
2014/03/11 职场文书
安全生产月活动总结
2014/05/04 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电