<!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. 找到多个与名为“HOME”的控制器匹配的类型。如果为此请求(“{CONTROLLER}/{ACTION}/{ID}”)提供服务的路由在搜索匹配此请求的控制器时没有指定命名空间，则会发生此情况。如果是这样，请通过调用含有“NAMESPACES”参数的“MAPROUTE”方法的重载来注册此路由。

    public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/ ...

  2. Python笔记11------一个K-means聚类的小例子

    #导入scipy库,库中已经有实现的kmeans模块,直接使用, #根据六个人的分数分为学霸或者学渣两类 import numpy as np from scipy.cluster.vq import ...

  3. C语言基础 (11) 结构体 ,共用体 枚举 typedef

    1 课堂回顾 作用域与生命周期 2 static 局部变量 2 打字游戏 3 内存分区代码分析 4 结构体基本操作 (复合类型[自定义类型 #include <stdio.h> #incl ...

  4. nmcli connection modify eth1 ipv4.addr "192.168.31.23" ipv4.method manual

    nmcli connection modify eth1 ipv4.addr "192.168.31.23/24" ipv4.method manual 修改IP地址

  5. rtsp://192.168.1.198:554/PSIA/streaming/channels/101

    rtsp://192.168.1.198:554/PSIA/streaming/channels/101 Playing rtsp://192.168.1.198:554/PSIA/streaming ...

  6. PHP面向对象(一)

    1 面向对象介绍 1.1 介绍 ​ 面向对象是一个编思想. 编程思想有面向过程和面向对象. ​ 面向过程: 编程思路集中的是过程上 ​ 面向对象: 编程思路集中在参与的对象 1.2 好处 多人合作方便 ...

  7. daning links 系列

    1001 Easy Finding POJ-3740 1002 Power Stations HDOJ-3663 1003 Treasure Map ZOJ-3209 1004 Lamp HDOJ-2 ...

  8. SQL优化-标量子查询（数据仓库设计的隐患-标量子查询）

    项目数据库集群出现了大规模节点宕机问题.经查询,问题在于几张表被锁.主要问题在于近期得几个项目在数据库SQL编写时大量使用了标量子查询. 为确定为题确实是由于数据表访问量超过单节点限制,做了一些测试. ...

  9. BA-水阀接线（图）

    220V水阀接线

  10. BA-给排水-供水系统自动控制（转载）

    浙江省建筑设计研究院划 杨绍胤 杨庆 摘 要:探讨供水系统变流量和恒压自动控制和设计方法.关键词: 供水系统 自动控制 传统给水系统常在屋顶设置高位水箱.水从地下水箱用水泵打到高位水箱.从高位水箱通过 ...