一、点击加载更多有点像分页获取数据类似，下面是本人写的一个简单的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width" />

    <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="~/Content/Phone/css/list_css.css" rel="stylesheet" />

    <title>新闻列表</title>

</head>

<body>

    <div id="list-new">

    </div>

    <!--加载更多按钮-->

    <div class="js-load-more">加载更多</div>

<script src="~/Content/Phone/js/zepto.min.js"></script>

<script>

$(function(){

    /*初始化*/

    var counter = ; /*计数器*/

    var pageStart = ; /*offset*/

    var pageSize = ; /*size*/

    /*首次加载*/

    getData(pageStart, pageSize);

    /*监听加载更多*/

    $(document).on('click', '.js-load-more', function () {

        pageStart++

        getData(pageStart, pageSize);

    });

    function getData(offset,size){

        $.ajax({

            type: 'GET',

            url: '/PhoneManage/Notice/listJson?pageSize=' + size + '&pageIndex=' + offset, //这里offset,size无作用，仅方便调试

            dataType: 'json',

            success: function(reponse){

                var data = reponse;

                var sum = reponse.length;

                var result = '';

                /************业务逻辑块：实现拼接html内容并append到页面*****************/

                //console.log(offset , size, sum);

                for (var i = (offset -) * size; i < sum; i++) {

                    result += '<a href="/PhoneManage/Notice/text?id=' + data[i].F_Id + '"><div class="list"><div class="text"><h3>' + data[i].F_Title + '</h3><p>'

                            + data[i].F_CreatorTime + '</p></div><div class="back"><img src="/Content/Phone/images/back1.png" width="32" /></div></div></a>';

                }

                $('#list-new').append(result);

                /*******************************************/

                /*隐藏more*/

                if ((offset * size) > sum) {

                    $(".js-load-more").hide();

                }else{

                    $(".js-load-more").show();

                }

            },

            error: function(xhr, type){

                alert('Ajax error!');

            }

        });

    }

});

</script>

</body>

</html>

二、点击加载更多，需要注意是在原来数据的基础上加载出来新的数据，所以拼接html是关键

Jquery点击加载更多的更多相关文章

  1. jquery 点击加载更多

    html部分 <ul class="bill moreadd"> <div class="total"><span>-< ...

  2. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  3. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  4. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  5. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  6. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. tableView中的“点击加载更多”点击不到

    假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...

  8. android ListView的上部下拉刷新下部点击加载更多具体实现及拓展

    android ListView的上部下拉刷新下部点击加载更多具体实现及拓展 ListView下拉刷新,上拉自动加载更多 下拉刷新以及加载更多

  9. ajax点击加载更多数据图片（预加载）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Git log和reflog

    1.log  log命令可以显示所有提交过的版本信息.显示信息如下: Administrator@USER-20171026MG MINGW64 ~/Desktop/lyf (master) $ gi ...

  2. selenium基础（元素定位）

    selenium的帮助文档: https://selenium-python.readthedocs.io/api.html#module-selenium.common.exceptions 目前支 ...

  3. Shuffle过程详解

  4. Linux 下 Nand Flash 驱动说明

    注册 driver_register 通过 module_init(s3c2410_nand_init);注册 Nand Flash 驱动. 在 s3c2410_nand_init ()中通过 dri ...

  5. 洛谷 2915 [USACO08NOV]奶牛混合起来Mixed Up Cows

    一道水状压,然而不知道是不是太久没做过dp了,我盯着它二十分钟才反应过来.... 还把数组开小了WA了一发QAQ //Twenty #include<algorithm> #include ...

  6. windows 可执行文件分析

    windows可执行文件是什么? 是具有PE文件格特性的文件,例如:.exe.dll.ocx等文件. 注:(这里只是让大家能明了一些,其实,可执行与否,和后缀没有什么关系,后缀只是windows方便管 ...

  7. IDEA如何像Eclipse打开多个项目？

    简述: 不能采用open方式,得采用 import module方式 (多个项目,可以不再同一个根目录下,真正的类似eclipse方式打开多个项目) 具体操作步骤: 1.选择一个maven项目,右键选 ...

  8. PAT甲级——A1071 Speech Patterns

    People often have a preference among synonyms of the same word. For example, some may prefer "t ...

  9. python print输出format太好用了

    不用担心什么其他的东西了,直接用format: print("{}的Ground,Detected,DetectedRight个数分别为{},{},{},".format(cate ...

  10. Redis List类型学习