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

<!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. vue+element的el-menu组件实现路由跳转及当前项的设置

    <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @ ...

  2. Hive学习笔记简版

    一.概述 1. Hive是Apache提供的基于Hadoop的数据仓库管理工具2. Hive提供了类SQL语言来操作Hadoop,底层会将SQL转化为MapReduce来执行,所以效率会比较低3. H ...

  3. wpf 让正执行的程序暂停几秒钟

    public static class DispatcherHelper     {         [SecurityPermissionAttribute(SecurityAction.Deman ...

  4. PropertyPlaceholderConfigurer的注意事项

    1.基本的使用方法是<bean id="propertyConfigurerForWZ" class="org.springframework.beans.fact ...

  5. 2019-11-9-win10-支持默认把触摸提升-Pointer-消息

    title author date CreateTime categories win10 支持默认把触摸提升 Pointer 消息 lindexi 2019-11-09 15:32:31 +0800 ...

  6. 锋利的Jquery(p的onclick()事件)

    1.一个p元素的点击事件 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="serve ...

  7. 动态设置背景图片，class，style

    1.动态设置背景图片<div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }" ...

  8. Apache Flink 进阶（一）：Runtime 核心机制剖析

    1. 综述 本文主要介绍 Flink Runtime 的作业执行的核心机制.首先介绍 Flink Runtime 的整体架构以及 Job 的基本执行流程,然后介绍在这个过程,Flink 是怎么进行资源 ...

  9. hdu 5382

    \(F(n)=\sum_{i=1}^n\sum_{j=1}^n[lcm(i,j)+gcd(i,j)\geq n]\) \(S(n)=\sum_{i=1}^nF(i)\) \(F(n)=n^2-\sum ...

  10. vue如何关闭sourceMap

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始 ...