<!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. 路飞学城Python-Day153

    Scrapy核心组件

  2. Python 之 格式化文件

    # 结构化文件存储- xml, json- 为了解决不同设备之间的信息交换 ## XML文件(可扩展标记语言) - 标记语言:语言中使用尖括号括起来的文本字符串标记 - 可扩展:用户可以自己定义需要的 ...

  3. 00072_System类

    1.概念 (1)System中代表程序所在系统,提供了对应的一些系统属性信息,和系统操作: (2)System类不能手动创建对象,因为构造方法被private修饰,阻止外界创建对象: (3)Syste ...

  4. lpad&amp;rpad

    lpad( string, padded_length, [ pad_string ] ) string: 准备被填充的字符串 padded_length: 填充之后的字符串长度 pad_string ...

  5. 婚礼上的谎言（C++实现）

    #include<iostream> using namespace std; void main(void) { int a,b,c; char DD,EE,FF; for (a=1;a ...

  6. 广东工业大学2016校赛决赛－网络赛 1169 Problem A: Krito的讨伐 优先队列

    Problem A: Krito的讨伐 Description Krito终于干掉了99层的boss,来到了第100层.第100层可以表示成一颗树,这棵树有n个节点(编号从0到n-1),树上每一个节点 ...

  7. svn是什么

    svn是什么 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Sub ...

  8. hdoj--1018--Big Number(简单数学)

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  9. EOJ 3000 ROT13加密和解密

    应用 ROT13 到一段文字上仅仅只需要检查字母顺序并取代它在 13 位之后的对应字母,有需要超过时则重新绕回 26 英文字母开头即可.A 换成 N.B 换成 O.依此类推到 M 换成 Z,然后串行反 ...

  10. 通过QEMU-GuestAgent实现从外部注入写文件到KVM虚拟机内部

    本文将以宿主上直接写文件到VM内部为例讲解为何要注入以及如何实现 tag: qemu-ga, qemu guest agent, kvm, guest-file-write, inject 小慢哥的原 ...