<!DOCTYPE html>
<html>   
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
        />
        <title>
            列表
        </title>
        <script src="../../script/jquery-1.11.1.min.js">
        </script>
        <script type="text/javascript" src="../../script/api.js">
        </script>
    </head>
    
    <body>
        <div style="width:100%">
            <ul id="list_item">
            </ul>
        </div>       
    </body>
    <script>
        apiready = function() {
            var id = 0;
            var cellarray = new Array();
            //得到json的路径
            var href = window.location.href; // 得到当前文件的路径
            var Route = ""; //得到json的路径                
            var json = ""; //读取的json
            var arr = new Array();
            arr = href.split("/");
            for (var i = 0; i < arr.length - 1; i++) {
                Route += arr[i] + '/';
            }
            Route += "list.json";
            //读取json的文件  
            api.readFile({
                path: Route
            },
            function(ret, err) {
                if (ret.status) {
                    json = ret.data;
                    //Json(json);
                    var list = eval('(' + json + ')');
                    var json1 = eval(list.data);
                    for (var i = 0; i < json1.length; i++) {
                        cellarray[i] = json1[i].img;
                    }
                    //当json的值大于10的时候
                    if (cellarray.length >= 10) {
                        //循环添加前10 个li标签                        
                        id= Ergodic(id ,id * 10 + 10,cellarray);
                    } else {
                        //小于10则直接添加                       
                        id= Ergodic(id ,cellarray.length,cellarray);                        
                    }
                } else {
                    api.alert({
                        msg: '错误码: ' + err.code + '错误信息' + err.msg
                    });
                }
            });
            //判断是否滑到底
            api.addEventListener({
                name: 'scrolltobottom'
            },
            function(ret, err) {
                if (cellarray.length - id * 10 >= 10) {
                    //循环添加前10 个li标签                 
                    id= Ergodic(id , id * 10 + 10,cellarray);
                } else {
                    if (cellarray.length - id * 10 < 10 && cellarray.length - id * 10 > 0) {
                        //小于10则直接添加                    
                        id= Ergodic(id , cellarray.length,cellarray);
                    } else {
                        api.toast({
                            msg: '已加载完毕',
                            duration: 1000,
                            location: 'bottom'
                        });
                    }
                }
            })
        }
        function tuandetail()
        {
                api.openWin({
                    name : 'tuandetail_header',
                    url : '../tuandetail_header.html',
                    bounces : false,
                    delay : 200
                });
        }
        //遍历cellarray返回id
        function Ergodic(id ,sty,cellarray)
        {
            var html = "";
            for (var i = id * 10; i < sty; i++) {
                   html += "<li  onclick='tuandetail()'>><img src='" + cellarray[i] + "'/></li>\r\n";                               
             }
             $("#list_item").append(html);
             id += 1;
             return id;
        }
        
    </script>

</html>

APICloud 上滑加载更多的更多相关文章

  1. Android如何定制一个下拉刷新，上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  2. vue 上滑加载更多

    移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...

  3. Android的ListView分页功能(上滑加载更多)

    今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...

  4. 移动端web页面上滑加载更多功能

    背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...

  5. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  6. 微信小程序上滑加载更多

    onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...

  7. jquery 上滑加载更多

    $(document).ready(function() { var totalPage = {$totalPage};//总页数 var page = {$page}; //起始页 var page ...

  8. jq上滑加载更多

    html 结构 <div id="main"> <ul class="order-list" id="list_box"& ...

  9. 微信小程序 scroll-view 完成上拉加载更多

    我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...

随机推荐

  1. js将timestamp对象与时间字符串之间的转换

    1. 时间戳转日期字符串 var timestamp = timestampObj.time;获取时间戳的毫秒数 var d = new Date(timestamp); //根据时间戳生成的时间对象 ...

  2. jemeter安装步骤

    1.jmeter下载地址:http://jmeter.apache.org/download_jmeter.cgi 2.在安装jmeter之前首先要安装jdk1.8以上版本,朋友们,千万不要忘了 jd ...

  3. Centos 搭建activemq

    Centos 搭建activemq 1,官方下载  http://activemq.apache.org/activemq-5122-release.html apache-activemq-5.15 ...

  4. Codevs 1077 多源最短路（ Floyd水 ）

    链接:传送门 思路:裸 Floyd /************************************************************************* > Fi ...

  5. 训练1-X

    输入n(n<100)个数,找出其中最小的数,将它与最前面的数交换后输出这些数. Input 输入数据有多组,每组占一行,每行的开始是一个整数n,表示这个测试实例的数值的个数,跟着就是n个整数.n ...

  6. BZOJ 2161 布娃娃 (主席树)

    题面 想了一个主席树做法 我们把每个区间的两个端点拆开 对$L,R$分别从小到大排序,分别从左到右依次把对应标号的$c_{i}$插入到权值主席树里 每次查询$p_{i}$,在排序后的$L,R$数组上分 ...

  7. Ansible常见问题处理

    1.ansible all -m ping报错,信息如下: [WARNING]: log file at /var/log/ansible.log is not writeable and we ca ...

  8. MPlayer 开始支持RTSP/RTP流媒体文件

    hostzhu点评:MPlayer对流媒体的支持,让大家能更进一步地利用linux来看网络直播,对Linux下多媒体应用的推动作用可以说不可度量. RTSP/RTP streaming support ...

  9. Activiti 各个节点涉及的表

    ################################# 部署流程定义涉及到的表 # 流程部署表SELECT * FROM `act_re_deployment` # 流程定义表SELECT ...

  10. Mysql学习总结（37）——Mysql Limit 分页查询优化

    select * from table LIMIT 5,10; #返回第6-15行数据 select * from table LIMIT 5; #返回前5行 select * from table ...