加载更多示例

最新推荐文章于 2022-01-26 15:25:32 发布
原创 最新推荐文章于 2022-01-26 15:25:32 发布 · 1.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了加载更多的实现原理，其实质等同于分页加载内容。点击加载更多按钮时，会显示加载中状态，加载完成后恢复为加载更多文字。如果数据已全部加载，则显示‘没有更多’提示。文中提供了具体的JavaScript代码示例。

加载更多跟分页道理是一样的
点击加载更多实际上就是加载下一页的内容
主要实现效果是
点击加载更多 加载的时候变成加载中 加载完成之后还是加载更多 如果没有文章就显示没有更多
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

代码示例

<div class="zzpd-rm" style="height: 58px;">
                    <h2  class="sub" id="sub" style="margin-top: 10px;">
                        <foreach name="subCategory"  item="vo" >
                            <a href="javascript:;" id="sub_{$vo.id}" <if condition="($key == 0)">class="active"</if>><div class="sub-dian"></div>{$vo.name}</a>
                        </foreach>
                    </h2>
                </div>

                <foreach name="subCategory"  item="vo1" key="key">
                <?php
                        if($vo1['id'] == 76 and $indexFlag == 0)
                        {

                    ?>
                <div class="news-main" style="display: block;" id="news_main_{$vo1.id}">
                    <div id="append_{$vo1.id}">
                        <article class="news-list clearfix">
                            <portal:articles limit="1" where="$where" order="post.published_time DESC" categoryIds="$vo1.id">
                            <div class="row">
                            <div class="col-md-3 column">
                                <a href="#" target="_blank">
                                    <img src="{:cmf_get_image_url($vo.more.thumbnail)}" width="100%" alt="">
                                </a>
                            </div>
                            <div class="col-md-9 column">
                                <div>
                                    <h2>
                                        <a href="{:url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo.category_id))}" target="_blank" class="link">{$vo.post_title}</a>
                                    </h2>
                                    <p class="desc">
                                       {$vo.post_excerpt}
                                    </p>
                                    <div class="date clearfix">
                                    <span class="cat-type">
                                        <volist name="$vo.categories" id="item">
                                            <a href="{:url('portal/List/index', ['id' => $item.id])}">{$item.name}</a>
                                        </volist>
                                    </span>
                                        <i>{:date('Y-m-d', $vo['published_time'])}</i>
                                    </div>
                                </div>
                            </div>
                            </div>
                            </portal:articles>
                        </article>
                        <hr class="list">
                        <portal:articles limit="1,6" where="$where" order="post.published_time DESC" categoryIds="$vo1.id" page="6">
                        <article class="news-list clearfix">
                            <div class="row">
                            <div class="col-md-12 column">
                                <div>
                                    <h2>
                                        <a href="{:url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo.category_id))}" target="_blank" class="link">{$vo.post_title}</a>
                                    </h2>
                                    <p class="desc">
                                        {$vo.post_excerpt}
                                    </p>
                                    <div class="date clearfix">
                                    <span class="cat-type">
                                        <volist name="$vo.categories" id="item">
                                            <a href="{:url('portal/List/index', ['id' => $item.id])}">{$item.name}</a>
                                        </volist>
                                    </span>
                                        <i>{:date('Y-m-d', $vo['published_time'])}</i>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </article>
                        <hr class="list">
                        </portal:articles>
                    </div>
                    
                    
                    <div class="five_gd">
                        <a href="javascript:;" onclick="getNewsHome({$vo1.id});" id="ids{$vo1.id}">点击查看更多</a>
                    </div>
                </div>
                <?php
                        $indexFlag ++;
                        }else{
                      ?>
                <div class="news-main" style="display: none;" id="news_main_{$vo1.id}">
                    <div id="append_{$vo1.id}">
                        <article class="news-list clearfix">
                            <portal:articles limit="1" where="$where" order="post.published_time DESC" categoryIds="$vo1.id">
                            <div class="row">
                            <div class="col-md-3 column">
                                <a href="#" target="_blank">
                                    <img src="{:cmf_get_image_url($vo.more.thumbnail)}" width="100%" alt="">
                                </a>
                            </div>
                            <div class="col-md-9 column">
                                <div>
                                    <h2>
                                        <a href="{:url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo.category_id))}" target="_blank" class="link">{$vo.post_title}</a>
                                    </h2>
                                    <p class="desc">
                                       {$vo.post_excerpt}
                                    </p>
                                    <div class="date clearfix">
                                    <span class="cat-type">
                                        <volist name="$vo.categories" id="item">
                                            <a href="{:url('portal/List/index', ['id' => $item.id])}">{$item.name}</a>
                                        </volist>
                                    </span>
                                        <i>{:date('Y-m-d', $vo['published_time'])}</i>
                                    </div>
                                </div>
                            </div>
                            </div>
                            </portal:articles>
                        </article>
                        <hr class="list">
                        <portal:articles limit="1,6" where="$where" order="post.published_time DESC" categoryIds="$vo1.id" page="6">
                        <article class="news-list clearfix">
                            <div class="row">
                            <div class="col-md-12 column">
                                <div>
                                    <h2>
                                        <a href="{:url('portal/Article/index',array('id'=>$vo.id,'cid'=>$vo.category_id))}" target="_blank" class="link">{$vo.post_title}</a>
                                    </h2>
                                    <p class="desc">
                                        {$vo.post_excerpt}
                                    </p>
                                    <div class="date clearfix">
                                    <span class="cat-type">
                                        <volist name="$vo.categories" id="item">
                                            <a href="{:url('portal/List/index', ['id' => $item.id])}">{$item.name}</a>
                                        </volist>
                                    </span>
                                        <i>{:date('Y-m-d', $vo['published_time'])}</i>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </article>
                        <hr class="list">
                        </portal:articles>
                    </div>
                    
                    
                    <div class="five_gd">
                        <a href="javascript:;" onclick="getNewsHome({$vo1.id});" id="ids{$vo1.id}">点击查看更多</a>
                    </div>
                </div>
                 <?php
                        }
                    ?>
                </foreach>

js

function getNewsHome(id){
            
            var page = $('#sub_' + id).data('page');
            page = page ? page : 2;
            // console.log(page);

            var url = GV.ROOT +'portal/list/getMore?'+'page='+ page +"&cid=" + id;
            $.get(url, function(data) {
                data = JSON.parse(data);
                var d = data.data;
                // console.log(d);
                var html = '';
                // setTimeout(function(){
                    //加载层-风格2
                if (d==null) {
                    $('#ids'+id).html('没有更多');
                }else{
                    $('#ids'+id).html('加载中...');
                    // layer.load(1);
                    //此处演示关闭
                    setTimeout(function(){

                      // layer.closeAll('loading');
                      for(var i=0; i<d.length; i++){
                            var item = d[i];
                            html += '<article class="news-list clearfix">\
                                <div class="row">\
                                <div class="col-md-12 column">\
                                <div>\
                                <h2>\
                                <a href="'+ item.url +'" target="_blank" class="link">'+ item.post_title +'</a>\
                            </h2>\
                            <p class="desc">'+ item.post_excerpt +'</p>\
                            <div class="date clearfix">\
                                <i>'+ item.published_time +'</i>\
                                <span style="margin-left:15px;">点击量：'+ item.post_hits +'</span>\
                            </div>\
                            </div>\
                            </div>\
                            </div>\
                            </article>\
                            <hr class="list">';
                        }
                        // console.log('---------------');
                        // console.log(html);
                        $('#append_'+ id).append(html);
                        page++;
                        $('#sub_' + id).data('page', page);
                        $('#ids'+id).html('点击查看更多');
                    }, 500);
                }
                    // layer.msg('加载中', {
                    //   icon: 16
                    //   ,shade: 0.01,
                    //   time: 500
                    // }, function(){
                    //   //do something
                    //       for(var i=0; i<d.length; i++){
                    //         var item = d[i];
                    //         html += '<article class="news-list clearfix">\
                    //             <div class="row">\
                    //             <div class="col-md-12 column">\
                    //             <div>\
                    //             <h2>\
                    //             <a href="'+ item.url +'" target="_blank" class="link">'+ item.post_title +'</a>\
                    //         </h2>\
                    //         <p class="desc">'+ item.post_excerpt +'</p>\
                    //         <div class="date clearfix">\
                    //             <i>'+ item.published_time +'</i>\
                    //             <span style="margin-left:15px;">点击量：'+ item.post_hits +'</span>\
                    //         </div>\
                    //         </div>\
                    //         </div>\
                    //         </div>\
                    //         </article>\
                    //         <hr class="list">';
                    //     }
                    //     // console.log('---------------');
                    //     // console.log(html);
                    //     // $('#news_main_'+ id).append(html);
                    //     $('#append_'+ id).append(html);
                    //     page++;
                    //     $('#sub_' + id).data('page', page);
                    // });

                    
                // },500);
            });
        }
前端之---加载更多
xiaoerduo123x的博客
09-08 2162
今天get了一个新技能  只能说我越来越厉害了   哈哈哈哈  先夸一下自己再写博客   必须的 有时候我们在做手机app的时候，我们想做一个效果，就是边滑动边加载数据，给用户一个好一点的体验。我找到了一篇文章，我觉得特别适合初学者 简单方便实用 我就是根据他所给的例子，然后自己动手，写自己的项目的。如果你觉得我写的不好，那么你可以去看看他的http://www.cnblog
jquery 点击加载更多 （可在一个页面实现多个）
10-31
jquery 点击加载更多 （可在一个页面实现多个）
load_More(点击加载更多)
08-24
点击加载跟多
loading图标
weixin_30624825的博客
09-20 231
/* * Loading弹窗 * 调用方法： * 显示 ==》 new Loading().showLoading('加载中...') * 隐藏 ==》 new Loading().hideLoading() */ function Loading() { this.showLoading = function (content) { var ...
ajax实现分页（响应html页面，sendFile；响应json数据）客户端渲染
QZ9420的博客
11-29 404
vscode： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {margin:0; padding: 0;} li {list-style: none;} body {background: #eee
精选资源
Android之RecyclerView轻松实现下拉刷新和加载更多示例
01-05
今天研究了下RecyclerView的滑动事件，特别是下拉刷新和加载更多事件，在现在几乎所有的APP显示数据列表时都用到了。自定义RecyclerView下拉刷新和加载更多听上去很复杂，实际上并不难，只要是对滑动事件的监听和...
ListView加载更多示例
11-23
总结，ListView加载更多示例主要涉及ListView的滚动监听、数据加载和适配器的更新。通过以上步骤和注意事项，我们可以创建一个功能完善的ListView，提供流畅的用户体验，同时有效地管理内存和网络资源。在实际开发中...
Swift快速集成下拉刷新和上拉加载更多示例代码
08-30
在iOS开发中，Swift语言提供了丰富的库来帮助开发者快速实现应用功能，其中之一便是下拉刷新和上拉加载更多的功能。本示例将介绍如何在Swift项目中快速集成ESPullToRefresh库，它是一个轻量级且易用的下拉刷新和上拉...
vue中实现滚动加载更多的示例
08-28
vue中实现滚动加载更多的示例 在本篇文章中，我们将讨论如何在Vue中实现滚动加载更多的功能。滚动加载更多是一种常见的交互式功能，用户可以通过滚动浏览器窗口来加载更多的数据。下面我们将一步步地讲解如何实现这...
vue实现的上拉加载更多数据/分页功能示例
10-16
在本示例中，主要介绍了如何利用Vue.js框架来实现一个上拉加载更多数据的分页功能。这一功能在前端开发中十分常见，主要用于在用户浏览网页时动态地从服务器获取更多数据，以提升用户体验。 首先，我们需要了解Vue....
瀑布流布局，点击加载更多效果
10-18
利用 jQuery瀑布流布局，点击加载更多效果 同时还用layui实现了一些别的样式
将isScroll.js封装成服务，实现单页应用中重复利用（基于Angularjs框架）
weixin_30293079的博客
06-28 173
　　以下代码完全可以用于实际项目中开发，实现上拉刷新，下拉获取数据功能： /*上滑加载 开始*//** * @author wbr * 滑动分页服务 * 依赖于iScroll.js(v4.2.5) * @param create方法: * id:配合页面div的id * pullUpFn:上拉动画结束后执行的加载更多回调函数,通常应该是remote和数据处理 * pullD...
页面加载更多的css,十种加载样式
weixin_30786631的博客
08-04 1756
原标题：十种加载样式对于设计师来说往往更多的是注重界面的设计，从而忽略了用户对于加载等待的体验，如何用不同的加载来缓解用户的等待焦虑，从而提升用户对产品的体验呢？下面就来和大家介绍一下都有哪些加载样式和使用方法。目录什么是加载？什么情况下需要加载？加载的样式一、什么是加载？加载如同反馈，在人机交互中，用户与界面的每一次互动都是一次加载过程。因操作导致的页面跳转、刷新或弹窗等从而使页面元素或信息发生...
加载更多
yzyblog的博客
05-14 385
/* * loadmore.js * 加载更多 * 可以传的参数默认有：size,scroll 可以自定义 * */ ;(function(w,$){ var loadmore = { /*单页加载更多 通用方法 * * @param callback 回调方法 * @param config 自定义参数 * */ get : function(...
到底加载更多，加载下一页
caikys的博客
04-11 9724
       var pageNum_hots = 1;//初始化页数 var totalPages_hots = ""; var loading = false;//加载状态 hots();//加载首页 // 底部分页加载 $(window).on('scroll', function () { var scrollTop = $(window).scrollTop(); i...
加载更多---vue
m0_46512929的博客
01-26 1975
可直接拿来用 <template> <div class="container"> <div class="list"> <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
点击加载更多内容
qq_35772936的博客
06-15 1398
基本原理：页面载入时，向后台请求数据，PHP通过查询数据库将最新的几条记录显示在列表页，在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到列表页。其实就是Ajax分页效果。   1.引入jquery库和jquery.mor...
安卓ListView加载更多示例教程
- **分页加载的优化**：为了进一步优化性能，可能需要引入加载状态管理，例如：加载中、加载完成、无更多数据、加载失败等状态，并在界面上进行相应提示。 #### 4. 分页加载的常见问题及解决方案 - **数据重复加载*...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值