<!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. jQuery中cookie使用方法

    <script type="text/javascript"> $(function () { var content=$.cookie('text');  //得到c ...

  2. 【深入理解Java虚拟机】自动内存管理机制——垃圾回收机制

      Java与C++之间有一堵有内存动态分配和垃圾收集技术所围成的"高墙",墙外面的人想进去,墙里面的人却想出来.C/C++程序员既拥有每一个对象的所有权,同时也担负着每一个对象生 ...

  3. maven的依赖冲突时的原则

    1.如图: 假设上图中的项目B引入了一个junit.jar架包是3.0的版本 项目D引入了一个junit.jar架包是4.0的版本,那么项目X引用的将会是4.0的版本 2.pom.xml排到最前面的架 ...

  4. 02018_StringBuffer练习

    1.已知int[] arr = {34,12,89,68}; 将其中的元素转成字符串,格式 [34,12,89,68]: 参考:02011_定义打印数组元素方法,按照给定的格式打印[11, 33, 4 ...

  5. LiquidCrystal库函数

    主要资料来源: 极客工坊-知识库 (LiquidCrystal库地址:http://wiki.geek-workshop.com/doku.php?id=arduino:libraries:liqui ...

  6. [Beginning SharePoint Designer 2010]Chapter5 主题和样式

    本章概要: 1.什么是CSS 2.样式表的组成 3.如何管理CSS适应SPD的工具和特性 4.被SPS使用的关键的CSS类别 5.使用SPD应用样式到你的站点上

  7. [Performance] Optimize Paint and Composite for the website

    "Paint" is one of the most preference killer, it can easily cost more than 60fps, and once ...

  8. 【Android】Eclipse自己主动编译NDK/JNI的三种方法

    [Android]Eclipse自己主动编译NDK/JNI的三种方法 SkySeraph Sep. 18th  2014 Email:skyseraph00@163.com 一.Eclipse关联cy ...

  9. Linux学习之基本介绍

    技术不分年龄高低,只分水平高低. 搞技术25k以下是不看天赋的,25k以上是要看天赋的. 1U服务器,2U服务器,刀片服务器.程序都是运行在服务器上的. 榜样的力量是无穷的.--MK. 汇编语言跟硬件 ...

  10. [Java]serialVersionUID的作用

    简单来说,Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的 字节流中的serialVersionUID与本地相应实体(类 ...