APICloud 上滑加载更多

<!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>

时间: 2024-12-20 11:05:11

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

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

前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉刷新和上滑,非常考验对android布局与父子触摸机制的功底,因此参考gitHub上的一个热门的下拉刷新项目 之所以选择他是因为它一个类就完成了所有View的适配,非常的精简强力. 需求 咱对下拉刷新.上滑加载更多的控件,需求如下: 1:下拉刷新,拖动到一定距离,提示文字变成 放手刷新 2:刷新完成

十分钟实现ListView下拉刷新上滑加载更多

说到ListView下拉刷新几乎每个APP都会用到,所以ListView下拉刷新是很重要的,就像ListView优化一样是你必会的东西. ListView实现下拉刷新如果我们开发人员自己编写相对来说比较费事的,当我们使用第三方库之后我们再来开发这个功能就会省事很多.相比与自己实现可以少编写不少代码,Android-PullToRefresh库可以轻松实现ListView的下拉刷新功能. 要使用Android—PullToRefesh库对ListView实现下拉刷新要经过以下几个步骤: 1.下载A

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

html: <div id="more"> <div class="single_item"> <div class="date"></div> <div class="author"></div> <div class="title"></div> </div> <a href="j

jquery 上滑加载更多

$(document).ready(function() { var totalPage = {$totalPage};//总页数 var page = {$page}; //起始页 var pageSize = {$pageSize} //每页显示个数 $(window).scroll(function() { if(totalPage-page>0){ //滚动条到达底部加载 if ($(document).scrollTop() >= $(document).height() - $(w

Android 下拉刷新,上滑加载更多

底部上拉效果 public class ListViewFooter extends LinearLayout { public final static int STATE_NORMAL = 0; public final static int STATE_READY = 1; public final static int STATE_LOADING = 2; private Context mContext; private View mContentView; private View

Android中自定义ListView实现上拉加载更多和下拉刷新

ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,GitHub上有一些开源库可以使用,但是本着学习的精神,我做的是使用自定义ListView实现这个功能. 思路:谷歌提供的ListView是不能提供下拉刷新和下拉加载的,所以我们就需要重写ListView.在ListView的头部和尾部加上我们的布局文件(progressbar). 先说上拉加载更多实现

Android5.0新特性:RecyclerView实现上拉加载更多

RecyclerView是Android5.0以后推出的新控件,相比于ListView可定制性更大,大有取代ListView之势.下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基本思路是让RecyclerView的Adapter加载两种布局,第一个布局来显示主界面,第二个布局来显示上拉加载时的提示信息,让RecyclerView监听是否滑动到最后一个item,如果是,则调用上拉刷新的逻辑,拉取远程数据,并显示第二个布局.等加载完毕时,刷新 Adapter,并隐藏第二个布局.

最新Android ListView 下拉刷新 上滑加载

开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,之前大家最常用的应该是pull to refresh或它的变种版吧,google官方在最新的android.support.v4包中增加了一个新类SwipeRefreshLayout,地址 这个类的作用就是提供官方的下拉刷新,并且效果相当不错,而上拉加载更多则用我们自定义的listview,也是相当简单. 下拉刷新 简单的介绍下: 首先它是一个viewgroup,但是它只允许有一个子控件,子控件能是任何view,使用的时候,所在

react-native ListView 封装 实现 下拉刷新/上拉加载更多

1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Component } from 'react'; import { Text, View, ListView, FlatList, Dimensions, PanResponder, Animated, Easing, ActivityIndicator, } from 'react-native';