iscroll动态加载数据完美解决方案

@{

    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动态加载数据完美解决方案的更多相关文章

爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取
selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理一.图片懒加载什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...
AppCan学习笔记----关闭页面listview动态加载数据
AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...
[JS前端开发] js/jquery控制页面动态加载数据滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
微信小程序（五）利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: Source Code 上图中,有一行代码: <tbody ...
js实现滚动条来动态加载数据
主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...
js/jquery控制页面动态加载数据滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据滑动滚动条自动加载事件--转他人的相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多有手机的相信都见过这样 ...
js动态加载数据并合并单元格
js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

随机推荐

noi 4978 宠物小精灵之收服
题目链接:http://noi.openjudge.cn/ch0206/4978/ 二维费用背包在最后找还剩多少体力的时候,直接找到第二维,当结果 f[n][i] == f[n][m] 时,就说明已 ...
关于NSLog
#ifdef __OBJC__#ifdef DEBUG#define NSLog(fmt,...) NSlog((@"%s [Line %d]" fmt),__PRETTY_FUN ...
python time模块
time模块 (有效时间1970-2038) (1)本地时间 (2)时间戳 (3)延时 time.localtime([secs]) #struct_time time.time() #timesta ...
phpinfo() 中 Local Value（局部变量）Master Value（主变量）的区别
[题外话]phpinfo()这个函数可以查看很多php的信息,要记得使用 phpinfo() 的很多部分有两个Column:Local Value(局部变量)和 Master Value(主变量) ...
python文件和目录操作方法大全（含实例）
一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...
CSS背景样式
CSS是级联样式表,用来表现HTML等文件样式的语言,CSS能够真正做到网页的表现与内容分离的设计语言,也就是说,做好了一款网页,可以通过另一个后缀名是css的文件进行修改其中的样式,不过在html的 ...
json 后台传前台
jsonObject需实例化new.jsonObject=new JSONObject();jsonObject.put("goodslist", list);jsonObject ...
DeviceIoControl
DeviceIoControl是kernel32中的函数,包含的头文件为winbase.h. BOOL DeviceIoControl( HANDLE hDevice, ...
POJ----(3974 )Palindrome [最长回文串]
Time Limit: 15000MS Memory Limit: 65536K Total Submissions: 5121 Accepted: 1834 Description Andy ...
使用jQuery Mobile的注意事项（译）
翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

iscroll动态加载数据完美解决方案

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

随机推荐

热门专题