手机端上拉加载更多数据(下一页内容)

最新推荐文章于 2021-11-05 17:54:34 发布
最新推荐文章于 2021-11-05 17:54:34 发布
阅读量780 收藏 1
点赞数
文章标签： php javascript json ViewUI
原文链接：https://my.oschina.net/u/3493191/blog/904449
版权

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<!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">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>列表</title>
    <link href="common.css" type="text/css" rel="stylesheet">
    <link href="wpublic.css" type="text/css" rel="stylesheet">
    <script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
</head>

<body>
<header class="aui-bar aui-bar-nav">
    <div class="aui-title">*</div>
    <a class="aui-pull-right aui-btn"  οnclick="location.href='${ctx}/test/test/search';" target="_blank">
        <span class="aui-iconfont">搜索</span>
    </a>
</header>
<div class="aui-content" style="margin-bottom: 10px">
    <ul class="aui-list aui-list-noborder" id="testflsh">
        <c:forEach items="${page.list}" var="test">
        <li class="aui-list-item" >
            <div id=" div" class="aui-list-item-inner aui-list-item-arrow" οnclick="location.href='${ctx}/test/test/import?id=${test.id}'">
                <span class="aui-text-overflow">[${fns:getDictLabel(test.sex, 'gender_type', '无')}]${test.name}</span>
            </div>
        </li>
        </c:forEach>
        <%--上拉时异步提交时应该携带,pageNo及pageSize--%>
        <input type="hidden" id="pageNo" value="${page.pageNo}"/>
        <input type="hidden" id="pageSize" value="${page.pageSize}"/>
        <input type="hidden" id="count" value="${page.count}"/>
    </ul>
</div>

<script type="text/javascript">
    //上拉显示更多
    $(window).scroll(function () {
        //已经滚动到上面的页面高度
        var scrollTop = $(this).scrollTop();
        //页面高度
        var scrollHeight = $(document).height();
        //浏览器窗口高度
        var windowHeight = $(this).height();
        //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
        if (scrollTop + windowHeight == scrollHeight) {
            //获取当前页的下一页
            var pageNo= $("#pageNo").val()*1+1;
            //获取每页显示的条数
            var pageSize= $("#pageSize").val()*1;
            //获取总条数
            var count=$("#count").val()*1;
            //获得总页数
            var pageTotal= (count+pageSize-1)/pageSize;
            //判断当前页是不是小于总页数
            if(pageNo<=pageTotal){
            //异步请求
            $.post("${ctx}/test/test/getpage",{"pageSize": pageSize ,"pageNo":pageNo},function (data) {
                //数据覆盖隐藏value
                $("#pageNo").val(data.pageNo);
                $("#pageSize").val(data.pageSize);
                var tests = data.list;
                if(tests.length>0){
                    var div;
                    //遍历
                    for (var i in tests) {
                        div=     '<li style="padding-top: 6px; padding-bottom: 6px;" class="aui-list-item" id="">'
                            + '<div class="aui-list-item-inner aui-list-item-arrow"  οnclick=location.href="${ctx}/test/test/import?id='+tests[i].id+'">'
                            +'<span class="aui-text-overflow">['+tests[i].sexName+']'+tests[i].name+'</span>'
                            +'</div>'
                            +'</li>';
                        $("#testflsh").append($(div));
                    }

                }
//            向浏览器控制台输出
//            console.log(data)
//                遍历
//                for(var i=0;i<data.list.length; i++){
//                    console.log(data.list[i].name)
//
//                }
            
            },"json");
            }
        }
    });
</script>

</body>
</html>

 

上拉刷新就是加载下一页内容;
首先页面接收要有当前页,每页显示的数量
共多少条数据
然后当拉到最低端时要异步请求加载下一页数据
请求的时候要传递下一页的页号,每页的数量,总记录数,及总页数
当前的页数小于或者等于页数的时候请求数据进行加载

转载于:https://my.oschina.net/u/3493191/blog/904449

chien2017
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery实现手机端上拉滚动加载更多数据
07-28
Jquery实现手机端上拉滚动加载更多数据功能手指滑动，完美实现多数据分布加载效果。数据再多页面流畅展示。
实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)
weixin_34240520的博客
09-14 429
做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话，我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是...
html手机页面下拉加载更多,jQuery手机端上拉刷新下拉加载更多页面
weixin_39604280的博客
06-03 275
基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下：实现的代码。html代码：row 10row 9row 8row 7row 6row 5row 4row 3row 2row 1for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) ...
手机端-上拉加载分页
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-05 271
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery上拉加载更多</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> * { margin:0px; padding:0px; } #heade
手机端H5上滑加载下一页
weixin_30604651的博客
03-07 1473
pc端分页，大多是点击页码或者下一页来翻页，这种方式不适合移动端。移动端手指滑动操作方便，就产生了上滑下载分页的交互模式，本文介绍这种方法的实现。 思路：绑定页面滚动事件->监听页面滑动底部->ajax请求下一页数据->组装dom插入页面。 主要功能代码： 监听滑动事件，判断如果滑动底部触发请求下一页面方法。 1 $(window).scroll(function ...
手机版上拉加载分页内容代码源代码
03-15
"手机版上拉加载分页内容代码"正是一种解决这一问题的有效方案，它允许用户在浏览时，通过上拉操作加载更多内容，而不是一次性显示所有信息，从而减轻了页面加载压力，提高了加载速度，并提供了更佳的滚动体验。...
手机端手指滑动上拉加载
07-18
这个功能使得用户在浏览页面时，只需通过手指向上滑动屏幕，就可以自动加载更多内容，无需手动翻页。这种方式极大地提升了用户体验，特别是在社交媒体、新闻聚合类应用和电商网站中。 在实现"手机端手指滑动上拉...
手机端上拉刷新下拉加载
11-03
1. 概念：下拉加载是指用户向下滚动到页面底部时，自动加载更多的内容，通常是分页数据的下一页。这种方式减少了用户翻页的繁琐操作，使得内容的浏览更加流畅。 2. 实现原理：下拉加载通过监听滚动事件，判断内容...
手机端 dropload实现上拉加载 下拉刷新
06-20
Dropload 是一种常见的移动端网页组件，它允许用户在滚动到底部时自动加载更多内容（上拉加载），或者在顶部时刷新页面（下拉刷新）。 在实际应用中，上拉加载通常用于分页加载数据，避免一次性加载大量内容导致...
PHP+Ajax点击加载更多内容
09-23
PHP+Ajax点击加载更多内容，适合手机端网页加载更多内容信息。与普通列表一次加载完所有内容或分页码类相比，更适合手机网页上的使用。普通列表如果一次加载全部内容，可能受网络影响，打开页面速度慢，而且很多用户...
手机页面下拉、上拉加载更多内容
01-19
手机页面下拉、上拉加载更多内容，效果流畅，使用方面
jQuery移动端下拉刷新、上拉加载更多插件
12-10
dropload.js是一款jQuery移动端下拉刷新、上拉加载更多插件。dropload.js可以依赖于jquery或Zepto，实现移动端常见的下拉刷新和上拉加载更多功能。
移动端上拉请求后台数据加载更新
08-24
数据展示一般分为分页和拉取加载，前者用于pc端，移动端常用于拉取加载数据
手机端上拉加载及下拉刷新
qq_44762950的博客
09-15 381
官方文档:[https://cnpmjs.org/package/vue2-better-scroll] 下载 1.yarn add vue2-better-scroll 2.npm install vue2-better-scroll -s 使用 直接上代码 <template> <div id="app"> <div class="he">这是一个demo</div> <main class="position-box"&gt
mescrollp php,vue插件mescroll.js实现移动端上拉加载和下拉刷新
weixin_29010003的博客
03-27 154
做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点1.npm安装npm install --save mescroll.js //不要使用cnpm安装导入(在哪个页面使用,则在哪个页面导入(这里的话，我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入))：import MescrollVue from ‘mes...
移动端上拉加载更多
motility_scy的博客
08-09 916
上拉加载更多组件的原理 上拉加载 1。当滚动条到达触底距离（触底距离：距离底部的一定距离），触发加载下一页数据 调用加载函数fn 2。如果正在加载下一页时（网速过慢时/重复下拉时），此时即使时反复的拖拽 滚动条，又达到了步骤一的条件，按照条件一的步骤，那么就会又发起请求加载， 这是重复加载某一页数据，这个是不符合需求和使用习惯的，通过发起请求时 添加一个标识变量loading，将loading设置为true,再通过 fn函数判断loding为true阻止代码的继续进行 3。如果数据已经加载全部，也要阻止fn
jquery移动端分页上拉加载
qwguanbin的博客
07-12 918
$(function(){ let pageNo = 1 //定义页数 let pageSize = 10 //定义加载条数 showDate() //执行加载数据函数第一页 //滚动条触底判断 $(window).scroll(function(){ let scrollTop = Math.ceil($(this).scrollTop()) //滚动条与顶部的高度 let curHeight = $(this).height() .
javascript-- 基于jQuery的模仿移动端上拉加载更多控件
11-09 109
简单实现手机端上拉加载更多，通过触发trigger()事件，触发原先已经写好的请求 css样式 .more{ padding: 10px 10px; height:50px; background:#fff; background-clip:co...
96work 商品列表 加载下一页数据 
chenggong9527的博客
04-03 209
27 商品列表 加载下一页数据 //pages/index1/index1.js /** *1用户上滑页面滚动条触底开始加载下一页数据 *1找到滚动条触底事件微信小程序官方开发文档中寻找 *2判断还有没有下一页数据 *1获取到总页数只有总条数 *总页数=math.ceil（总条数/页容量pagesize） *总页数=math.ceil(23/...
vue上拉加载更多数据
最新发布
06-02
要实现Vue上拉加载更多数据，可以使用以下步骤： 1. 在Vue组件中添加一个数据列表，并设置一个初始的数据量，例如： ``` data() { return { dataList: [], pageSize: 10, pageNum: 1 } } ``` 2. 在模板中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值