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 相关文章推荐
一段实现页面上的图片延时加载的js代码
Feb 11 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 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如何比较两个浮点数是否相等详解
2019/02/12 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Python中标准模块importlib详解
2017/04/16 Python
手把手教你python实现SVM算法
2017/12/27 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
一些高难度的SQL面试题
2016/11/29 面试题
个人找工作的自我评价
2013/10/17 职场文书
自我评价200字分享
2013/12/17 职场文书
高中生期末评语大全
2014/01/28 职场文书
《锄禾》教学反思
2014/04/08 职场文书
李开复演讲稿
2014/05/24 职场文书
企业消防安全责任书
2014/07/23 职场文书
员工工作表扬信
2015/05/05 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
导游词之西递宏村
2019/12/10 职场文书