简单的分页

最新推荐文章于 2024-05-16 15:04:47 发布
最新推荐文章于 2024-05-16 15:04:47 发布
阅读量128 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37902100/article/details/78794230
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <style>
        .page-media{
           max-height: 600px;
            /*overflow: hidden;*/
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="page-media">
        <ul class="page-content">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>

    function pageFun(){
        var j=2;
//        console.log(media_height);
        $(".page-media").scroll(function () {
            var content_height=$(".page-content").height();
            var media_height=$(".page-media").height();
            var media_scroll=$(".page-media").scrollTop();

            calculateFun(media_height,content_height,media_scroll);
        });
    }

    function calculateFun(windHeight,height,top){
        var flagAppend = true;
        var flag=Number(height) - (Number(top)+Number(windHeight))<50? true:false;
        console.log(flag);
        if(flag == true){
            //模拟ajax获得数据
             if(flagAppend == true){
                 flagAppend =false;
                 var html="";

                 for(var i=0;i<10;i++){
                     html=html+"<li>"+j+"</li>";
                 }
                 j=j+1;

                 $(".page-content").append(html);
                 setTimeout(function(){
                     flagAppend =true;
                 },1000)
             }

        }


    }
    pageFun();
</script>
</body>
</html>
黑骑军
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ThinkPHP_实现简单分页
weixin_42137574的博客
09-18 1047
ThinkPHP文档参考地址:https://www.shouce.ren/api/view/a/12704 模型方法实现分页 得创建一个model 名字和数据库表 去除前缀后的名字一样 比如 数据库表 叫tp_goods model名字得叫Goods 数据库表前缀 在database.php里配置 跳转首页的控制器里: public function index() { //分页查询 每页10条 $goods = \app\admin\model\Goods
Vue实现简单分页器
10-17
Vue实现简单分页器主要涉及Vue.js框架与前端分页组件的开发。Vue.js是一个轻量级的渐进式JavaScript框架，它允许开发者构建可复用的组件，并且提供了响应式的数据绑定和组件化功能，使得开发过程更加高效。在这个...
简单分页例题
weixin_61010342的博客
06-18 740
d. 根据逻辑地址来查找页表项（页表项就是物理地址的页框号），再通过页框号加上逻辑地址的页内偏移量得到物理地址，所以逻辑地址中的每一项和页表中的每一项是一一对应的，所以页表项个数等于逻辑地址页数，为有2^16 个。c. 物理地址 = 页框号 + 页内偏移量，已知内存大小为 2^32 字节（即物理地址 32 bit），页内偏移量 10 bit，故页框号位数为 32 - 10 = 22 bit。a. 逻辑地址 = 页号 + 页内偏移量，页号 16 bit，页内偏移量 10 bit，故逻辑地址有 26 bit。
layui实现简单分页
jh_negit的博客
12-15 7648
第一次写，有点小紧张！！！对layui分页做一个简单的总结。 首先引用layui和jQuery的js就不用再说了，写一下重点内容 1、定义一个id为pagebox的div，用于显示分页 <div class="commentbox" id="divlist"> <ul class="commentList" id="ul"> </ul> </...
Thymeleaf简单分页
weixin_56163435的博客
01-14 3871
1.首先要编写分页插件 MybatisPlusConfig。 @Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInne..
html简单分页效果,JS实现的简单分页功能示例
weixin_29168153的博客
06-05 514
本文实例讲述了JS实现的简单分页功能。分享给大家供大家参考，具体如下：HTML部分：js部分：parseInt(num/pageSize)){totalPage=parseInt(num/pageSize)+1;}else{totalPage=parseInt(num/pageSize);}var currentPage = pno;//当前页数var startRow = (currentPag...
TP5简单分页
withoutfear的博客
07-27 627
控制器类 index.php <?php namespace app\index\controller; //声明命名空间 session_start(); use think\Db;//引入系统数据库类 use think\Controller;//引入系统控制器类 use \app\index\model\User;//导入user模块 class Index extends Controller { public function index() {
thymeleaf 简单分页
small_ye的博客
03-22 1687
thymeleaf 简单分页 今天项目中需要做简单分页，效果如下！记录一下 <ul class="am-pagination tpl-pagination" > <li>共有<font th:text="${pts.getTotalElements()}"></font>条&nbsp;共<font th:text...
WPF DataGrid 分页 简易分页
浪里骚白龙
11-28 4106
前言 有项目用到简易的分布表（不需要排序，修改等复杂操作，只需要分页）网上找到的都不是我需要的，在此使用绑定自制一个简易分页，不修改DataGrid样式及其事件,最大限度给其它项目复用及定制 效果 原理​​ 通过绑定数据完成逻辑实现 在需要用到分页的DataGrid的地方,给DataGrid及其它按钮绑定类型 实现 可跟据自身需求随意更改样式,语言及排板 绑定DataGrid数据...
Element-UI 实现简单分页
读万卷书，行万里路。
01-22 862
Element-UI 实现简单分页 首先，先创建简易的 table <template> <div> <el-table :data="current_page_data"> <el-table-column prop="id" label="ID"> </el-table...
简单分页和固定分区的区别和联系
Kegi_的博客
05-16 445
但是，它可能会导致内部碎片的产生，因为每个页的大小是固定的，可能会出现分配的页大于进程实际需要的情况。固定分区是一种将内存空间划分为固定大小的分区的方式。但是，它可能会导致内部碎片的产生，因为每个分区的大小是固定的，可能会出现分配的分区大于进程实际需要的情况。总的来说，简单分页和固定分区都是内存管理的基本方式，它们在不同的场景下都有各自的优缺点。简单分页的地址转换是通过页表进行的，而固定分区的地址转换是通过分区表进行的。简单分页的页大小是固定的，而固定分区的分区大小可以不同。
简单分页插件
05-24
"简单分页插件"是一个针对JavaScript（js）设计的小巧实用的工具，用于帮助开发者轻松实现网页的分页功能。下面将详细阐述这个插件的工作原理、使用方法以及可能涉及到的技术点。 首先，`myPagination.css`是这个...
使用js实现简单分页
05-27
本文将深入探讨如何使用JavaScript实现简单分页，并结合提供的分页模块进行分析。 首先，我们要理解分页的基本原理。分页通常涉及到两个关键参数：每页显示的数据量（items per page）和总数据量（total items）。...
javaweb分页简单分页
10-21
本教程将详细介绍如何实现一个简单的分页功能。 首先，理解分页的基本概念。分页通常包括两个主要部分：当前页数和每页显示的数据量。用户可以通过点击页码或使用导航按钮来改变这些值。在JavaWeb应用中，我们可以...
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
最新发布
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!
大学生创业计划书(35)三份资料.doc
07-14
大学生创业计划书(35)三份资料.doc
大学生创业计划书(33)三个文档.doc
07-14
大学生创业计划书(33)三个文档.doc
组件写简易分页器
05-26
好的，下面是一个简易的分页器组件实现： ```html (1)">首页 (currentPage - 1)">上一页 (page)">{{ page }} (currentPage + 1)">下一页 (totalPage)">末页 export default { name: "Pagination", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值