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

<!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. PAT甲级——A1115 Counting Nodes in a BST【30】

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  2. day4：Python列表（list）元组（ tuple）字典（dict）

    列表----list 列表:中括号,每个元素用‘,’分割,列表里面也可以嵌套列表,列表里面可以包含数字,字符串,布尔值等,也就是元素的集合 例:test = [2,4,'sun','yao'] #索引 ...

  3. CAS机制详解

    目录 1. 定义 2. 实现原理 3. 无版本号CAS实战说明 4. CAS机制在Java中的应用 5. CAS的缺点 1. CPU开销过大 2. 不能保证代码块的原子性 3. ABA问题 6. JA ...

  4. opencv-识别手写数字

    首先拆分图片得到数据 #include "stdafx.h" #include <iostream> #include "opencv2/opencv.hpp ...

  5. antidependence and data hazard

    See below example. ADDD  F6, F0, F8 SUBD   F8, F10, F14 Some article would say that “ There’s an ant ...

  6. 关于set_multicycle_path的最后总结

    (1) –start/-end决定移动的距离以start_clock/end_clock为单元: (2) 对于-setup选项,移动距离是在默认关系的基础上移动(数值-1): (3) 默认往后, se ...

  7. 洛谷P4550 【收集邮票】

    题目链接: 神仙题QAQ 题目分析: 概率期望题是不可能会的,一辈子都不可能会的QAQ 这个题也太仙了 首先明确一下题意里面我感觉没太说清楚的地方,这里是抽到第\(i\)次要\(i\)元钱,不是抽到第 ...

  8. vue + element-ui实现简洁的导入导出功能

    1.安装ElementUI模块 cnpm install element-ui -S 2.在main.js中引入 import ElementUI from 'element-ui' import ' ...

  9. Elasticsearch template学习

    Elasticsearch template Elasticsearch存在一个关键问题就是索引的设置及字段的属性指定,最常见的问题就是,某个字段我们并不希望ES对其进行分词,但如果使用自动模板创建索 ...

  10. yum 安装配置

    光盘挂载:mount /dev/cdrom /mnt/cdrom 配置文件路径:vim /etc/yum.repos.d/dvd.repo 配置文件内容:[dvd]name=dvdbaseurl=fi ...