@{

    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. Poj(1251),Prim字符的最小生成树

    题目链接:http://poj.org/problem?id=1251 字符用%s好了,方便一点. #include <stdio.h> #include <string.h> ...

  2. 2016年12月24日 星期六 --出埃及记 Exodus 21:19

    2016年12月24日 星期六 --出埃及记 Exodus 21:19 the one who struck the blow will not be held responsible if the ...

  3. for与if、else的使用

    #!/usr/bin/env python def fun3(x) : num =0 for i in x : if i == "" : num += 1 if num == 0 ...

  4. 凯撒加密（key为3）

    基本思想: 加密是把字符串中的每一个字符+3解密是每一个字符-3 源代码: package demo;import java.util.Scanner; class Encryption{ Strin ...

  5. python os模块(1)

    os模块主要处理文件和目录(文件夹)的创建.删除.检查判定.属性值修改.路径修改. (1)获取当前目录的两种方法 1 os.getcwd() os.path.abspath('.') (2)创建文件夹 ...

  6. Android ListView简单实用

    layout创建: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ ...

  7. JavaScript为input/textarea自定义hover,focus效果

    <title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...

  8. 轻松解决Linux安装Eclipse方法

    随着Linux的发展,很多人开始学习Linux系统,你了解Linux系统么?你是Linux系统的应用者么?本文为你详细介绍Linux安装Eclipse,为你在学习Linux安装Eclipse时起一定的 ...

  9. hdu2243考研路茫茫——单词情结（ac+二分矩阵）

    链接 跟2778差不多,解决了那道题这道也不成问题如果做过基本的矩阵问题. 数比较大,需要用unsigned longlong 就不需要mod了 溢出就相当于取余 #include <iostr ...

  10. CSS布局：两列，左边宽度自适应，右边宽度固定200px

    <div id="box1"> <div id="left1"></div> <div id="right1 ...