html5实现上下滑动翻页功能-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

html5实现上下滑动翻页功能

2016-06-07 09:42:25 9147 1

table的数据量多的时候,怎么控制向下滑动即翻页,数据最下点击按钮跳到第一条数据

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:29:27

    一.无限滚动概念
    首先,它是基于jQuery的,另外还要明白无限滚动的概念:无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候,触发某ajax函数(infinite-scroll内已经封装好),往后台加载文件或者数据,又或者从外部引入静态html形式文件。
    二.探讨infinite-scroll
    1.从网页头引入两个js文件,注意必须先放jquery的

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
    <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  

    2.之后在网页头自己写一个js脚本

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    <script>  
    $(document).ready(function (){  
      $("#container").infinitescroll({  
            navSelector: "#navigation",      //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块  
            nextSelector: "#navigation a",  //下一页的导航  
            itemSelector: ".scroll " ,             //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方)        
            animate: true,                          //加载时候时候需要动画,默认是false  
            maxPage: 3,                            //最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿         
        });  
    });   
       </script>

    3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
    <%@ page language="java" contentType="text/html; charset=utf-8"  
        pageEncoding="utf-8"%>  
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8">  
    <title>无限翻页效果</title>  
    <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
    <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  
    <script src="css/infinite-scroll/test/debug.js"></script>  
     <script>  
     $(document).ready(function (){               //别忘了加这句,除非你没学Jquery  
          $("#container").infinitescroll({  
                navSelector: "#navigation",     //页面分页元素--成功后自动隐藏  
                nextSelector: "#navigation a",  
                itemSelector: ".scroll " ,             
                animate: true,  
                maxPage: 3,                                                  
            });  
     });   
        </script>  
    </head>  
    <body>  
        <div id="container">            <!-- 容器 -->  
            <div class="scroll">         <!-- 每次要加载数据的数据块-->  
            第一页内容第一页内容<br>  
            第一页内容<br>第一页内容<br>第一页内容<br>  
            第一页内容<br>第一页内容<br>第一页内容<br>  
            第一页内容<br>第一页内容<br>第一页内容  
            </div>  
        </div>  
            <div id="navigation" align="center">         <!-- 页面导航-->  
            <a href="user/list?page=1"></a>        <!-- 此处可以是url,可以是action,要注意不是每种html都可以加,是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数,这个一定要加在这里,它的作用是指出当前页面页码,没加载一次数据,page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->  
        </div>  
    </body>  
    </html>  

    三.细微部分
    1.js函数里还可定义的其他属性:

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    
    debug        : true,                                         //用于调试,如果需要用到,只需在网页头引入官网demo里的debug.js文件                  
    loadingImg   : "/img/loading.gif",                   //加载时候显示的进度条,用户可以自定义       
    loadingText  : "Loading new posts...",            //加载时显示的文字     
    extraScrollPx: 50,                                            //离网页底部多少像素时触发ajax  
    donetext     : "I think we've hit the end, Jim" ,     //加载完数据(到达底部时)显示的文字提醒  
    errorCallback: function(){},                             //加载完数据后的回调函数,可选      

    其他属性暂不作过多介绍

    2.数据的载入方式
    ①html :如果你已经有固定的数据块,可以放到html里面加载静态页面。
    ②json :可以用后台返回json的方式,返回的时候要指定temple里面的html模版,否则会出错。
    ③我上面例子用的其实也是json,前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。(个人习惯)
    3.数据分页方式
    本例用hibernate进行数据分页。

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56984浏览量 回答数 19

1

回答

支付宝H5 下载的时候,提示 【请确保该下载文件来源安全,如需浏览,请长按网址复制后使用浏览器访问】

游客ptexzird3doe2 2019-10-14 15:29:54 68424浏览量 回答数 1

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93742浏览量 回答数 28

66

回答

第一期阿里云高校工作坊申办启动

柚子菌 2017-08-10 17:04:08 43805浏览量 回答数 66

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 47107浏览量 回答数 19

1

回答

H5 直播的疯狂点赞动画是如何实现的?(附完整源码)

剑曼红尘 2020-04-15 19:03:48 35305浏览量 回答数 1

58

回答

技术入门问答集锦,涉及多种技术方向,解决新人学习困惑

管理贝贝 2016-08-03 10:13:27 52745浏览量 回答数 58

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80453浏览量 回答数 13

61

回答

阿里云OSS需求汇总帖,有需求请进来说说

enj0y 2012-09-05 08:40:29 41523浏览量 回答数 61

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47409浏览量 回答数 46
2736
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载