@{

    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. prototype与原型链

    1.今天翻看 阮一峰老师的博客看到了,一篇讲javascript为什么要设计出prototype,跳转      大意就是new 的方式有缺陷,没有共同的属性,一下明白了很多. 在来一张原型链的图:

  2. Windows7开通Internet信息服务

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

  3. js与jquery的用法

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />后面加上 ...

  4. R----ggplot2包介绍学习

    分析数据要做的第一件事情,就是观察它.对于每个变量,哪些值是最常见的?值域是大是小?是否有异常观测? ggplot2图形之基本语法: ggplot2的核心理念是将绘图与数据分离,数据相关的绘图与数据无 ...

  5. BQ24296充电管理芯片使用过程中的注意事项

    BQ24296遇到的一点问题 概述:BQ24296是TI出品的具有窄范围VDC控制.基于I2C通讯的最大支持3A充电电流的开关式电源路径管理芯片.可以轻松实现2A以上的大电流充电,能量转换效率达到90 ...

  6. Git 忽略文件

    在Git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则例如: # 此为注释 – 将被 Git 忽略 *.a    ...

  7. 客户端判断是否为IE9以上版本

    function detectBrowser() { var browser = navigator.appName if(navigator.userAgent.indexOf("MSIE ...

  8. Android 四大组件之二(Service)

    service可以在和多场合的应用中使用,比如播放多媒体的时候用户启动了其他Activity这个时候程序要在后台继续播放,比如检测SD卡上文件的变化,再或者在后台记录你地理信息位置的改变等等,总之服务 ...

  9. Gradle version 2.2 is required. Current version is 2.14.1.

    gradle版本错误: 1. 修改gradle\wrapper\gradle-wrapper.properties文件: distributionUrl=https\://services.gradl ...

  10. ORACLE分页查询SQL语法——最高效的分页

    --1:无ORDER BY排序的写法.(效率最高)--(经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然!) SELECT * FROM (SELECT  ...