@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <title>iScroll demo: infinite scrolling</title>

    <script src="~/Scripts/jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="~/Scripts/iscroll/build/iscroll-infinite.js"></script>

    <script type="text/javascript">

        var myScroll;

        function loaded() {

            myScroll = new IScroll('#wrapper', { scrollX: true, scrollY: false, mouseWheel: true, snap: true });

        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        $(function () {

            var w = $(window).width();

            $("ul>li").css("width", w);

            var count = $("ul>li").length;

            $("#scroller").css("width", w * count);

            loaded();

            myScroll.on('scrollEnd', function () {

                count = $("ul>li").length;

                if (Math.abs(this.x) >= w * (count - 1)) {

                    // do something

                    for (var i = 0; i < 10; i++) {

                        $("ul").append("<li>Cell " + (count+1 + i) + "</li>");

                    }

                    count = $("ul>li").length;

                    $("#scroller").css("width", w * count);

                    $("ul>li").css("width", w);

                    setTimeout(function () {

                        myScroll.refresh();

                        myScroll.options.snap = true;

                    }, 10);

                }

            });

        });

    </script>

    <style type="text/css">

        * {

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

        }

        html {

            -ms-touch-action: none;

        }

        body, ul, li {

            padding: 0;

            margin: 0;

            border: 0;

        }

        body {

            font-size: 12px;

            font-family: ubuntu, helvetica, arial;

            overflow: hidden; /* this is important to prevent the whole page to bounce */

        }

        #header {

            position: absolute;

            z-index: 2;

            top: 0;

            left: 0;

            width: 100%;

            height: 45px;

            line-height: 45px;

            background: #CD235C;

            padding: 0;

            color: #eee;

            font-size: 20px;

            text-align: center;

            font-weight: bold;

        }

        #footer {

            position: absolute;

            z-index: 2;

            bottom: 0;

            left: 0;

            width: 100%;

            height: 48px;

            background: #444;

            padding: 0;

            border-top: 1px solid #444;

        }

        #wrapper {

            position: absolute;

            z-index: 1;

            top: 45px;

            bottom: 48px;

            left: 0;

            width: 100%;

            background: #ccc;

            overflow: hidden;

        }

        #scroller {

            position: absolute;

            z-index: 1;

            -webkit-tap-highlight-color: rgba(0,0,0,0);

            width: 50000px;

            height: 100%;

            background-color: #a00;

            -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;

        }

            #scroller ul {

                list-style: none;

                padding: 0;

                margin: 0;

                width: 100%;

                height: 100%;

                text-align: center;

            }

            #scroller li {

                display: block;

                float: left;

                width: 100px;

                height: 100%;

                border-right: 1px solid #ccc;

                background-color: #fafafa;

                font-size: 14px;

            }

    </style>

</head>

<body>

    <div id="header">iScroll</div>

    <div id="wrapper">

        <div id="scroller">

            <ul>

                <li>Cell 1</li>

                <li>Cell 2</li>

                <li>Cell 3</li>

                <li>Cell 4</li>

                <li>Cell 5</li>

                <li>Cell 6</li>

                <li>Cell 7</li>

                <li>Cell 8</li>

                <li>Cell 9</li>

                <li>Cell 10</li>

            </ul>

        </div>

    </div>

    <div id="footer"></div>

</body>

</html>

iscroll动态加载数据完美解决方案的更多相关文章

  1. 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取

    selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...

  2. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  3. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  4. 微信小程序（五） 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  5. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  6. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  7. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

随机推荐

  1. laravel框架总结(五) -- 服务提供者(提及契约Contracts)

    首先理解两个概念 1.契约:一组定义了框架核心服务的接口 2.服务提供者:所有 Laravel 应用程序启动的中心所在. 包括你自己的应用程序,以及所有的 Laravel 核心服务,都是通过服务提供者 ...

  2. IntelliJ IDEA 14和Maven创建java web项目

    安装Maven 下载安装 去maven官网下载最新版. 解压到安装目录. 配置 右键桌面的计算机图标,属性–>高级系统设置–>环境变量,添加M2_HOME的环境变量,然后将该变量加入的PA ...

  3. Windows7开通Internet信息服务

      我要开通Windows的Internet Information Service(也就是Internet信息服务,简称IIS),当本地服务器用,因为要在里面安装页面项目.    我参考了这篇文章的 ...

  4. 复旦高等代数 I（15级）思考题

    1.证明: 第三类分块初等变换是若干个第三类初等变换的复合. 特别地, 第三类分块初等变换不改变行列式的值. 2.设 $n\,(n\geq 2)$ 阶方阵 $A=(a_{ij}(x))$, 其中每个元 ...

  5. c# base关键的理解

    base 最大的使用地方在面相对性开发的多态性上.(什么是多态,如何理解多态) base可以[完成]创建派生类实例时调用其基类构造函数或者调用基类上已经被其他方法重写的方法 //关于base调用基类构 ...

  6. Query Designer中的特征限制(Characteristic Restrictions)、缺省值(Default Values)、自由特性(Free Characteristics)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. 解决T400\T500\W500等安装win10驱动后黑屏问题

    T400.W500.T500等机型有双显卡的机型,在安装WIn10后会在驱动后黑屏,但可见启动画面: 原因:没有对应的双显卡驱动程序,导致系统无法正确识别显卡: 解决方法:开机按F1进入Bios,在显 ...

  8. 从webRoot中下载Excel

    @RequestMapping("downLoad") public void downLoad(Offsupervise off1,HttpServletRequest requ ...

  9. 学习mongo系列（七）aggregate() ,$group() 管道

    aggregate()聚合,主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*) 接上边的数据库: > db.user.aggregate ...

  10. java高薪之路__001_类

    Java中内部类分四种:成员内部类.局部内部类.静态内部类和匿名内部类.要注意静态内部类的调用方式与其他不同,采用的是类似调用类中的静态属性.静态方法的方式 Multi Level 调用不同类中的相同 ...