@{

    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. 不同系统下的回车\r和换行\n，及其历史

    我们平时按下键盘上的‘回车键’,就能实现回车换行[我们在屏幕上所看到的就是光标移到了下一行的开头位置!!ps:不讨论软件实现的特殊功能,如word里的回车智能缩进].因此对这个按键更准确说应该叫做‘回 ...

  2. python之redis

    Redis简单介绍 如果简单地比较Redis与Memcached的区别,大多数都会得到以下观点:1 Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,zset,hash等数据结构 ...

  3. Redis哈希表的实现要点

    Redis哈希表的实现要点 哈希算法的选择 针对不同的key使用不同的hash算法,如对整型.字符串以及大小写敏感的字符串分别使用不同的hash算法: 整型的Hash算法使用的是Thomas Wang ...

  4. caffe中python接口的使用

    下面是基于我自己的接口,我是用来分类一维数据的,可能不具通用性: (前提,你已经编译了caffe的python的接口) 添加 caffe塻块的搜索路径,当我们import caffe时,可以找到. 对 ...

  5. combobox获取值

    easyui-combobox是组合框 ,既可以输入,也可以选择 获取的数据是json格式的  [{"id":"001","text":&q ...

  6. [SoapUI] JDBC 请求连接SQL Sever，MySQL

    MySQLDriver: com.mysql.jdbc.DriverConnection string: jdbc:mysql://localhost:3306/xxx?user=xxx&pa ...

  7. Nginx reopen reload作用及工作过程

    http://www.iigrowing.cn/nginx-reopen-reload-zuo-yong-ji-gong-zuo-guo-cheng.html Nginx reopen reload作 ...

  8. Objective－C（ Foundation框架 一 字符串）

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...

  9. Objective－C（ protocol协议）

    protocol 协议 protocol:用来声明方法 1.协议的定义 @protocol 协议名称 <NSObject> // 方法声明列表.... @end 2.如何遵守协议 1> ...

  10. React Native 文本输入

    TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...