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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
vue.js+element 默认提示中英文操作
Nov 11 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
杏林同学录(三)
2006/10/09 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
软件测试企业面试试卷
2016/07/13 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
医务工作者先进事迹材料
2014/01/26 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
教师见习报告范文
2014/11/03 职场文书
研究生导师评语
2014/12/31 职场文书
地陪导游欢迎词
2015/01/26 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android