HardBirch

AutoPager的简单实现

时间:10-08-20 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:4 点击: 2,240 次

Firefox有个自动翻页的插件AutoPager,使用起来非常的方便。腾讯微博也有相同的功能,当鼠标滑动到底部时会自动展开下一页,如下图所示:

 

展开后如下所示:

这个功能虽然比较小,但是实现起来是非常有意思的事情,我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。

1、首先移动滚动条会触发window.onscroll事件。

2、我们可以根据滚动条滚动时屏幕位置和页面底部的距离来判断是否需要翻页。

需要用到三个函数:

1、pageHeight:页面总高度。

2、windowHeight:屏幕高度。

3、ScollY:页面滚动的高度。

pageHeight减去windowHeight减去ScollY即为当前屏幕底部到页面底部的距离,如下图所示:

下面我们可以来实现这个功能了,我们设置一个阈值来设定页面加载的次数。

这样,我们就实现了AutoPager的功能。

剩下一个很有意思的问题,window.onscroll按照道理会在滚动条的每次移动时触发,那么在我们设定触发的高度内(例子里是60个像素),它会不会频繁的调用我们的方法呢?例如像腾讯微博一样的Ajax调用会不会多次出现呢?又该如何解决此问题呢?读者有空的话可以思考思考。

 

 

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: AutoPager的简单实现

AutoPager的简单实现:目前有4 条留言

  1. 4楼
    xjbx:

    [e03]

    2010-08-25 14:29 [回复]
  2. 地板
    alanslchu:

    [e03]

    2010-08-25 21:24 [回复]
  3. 板凳
    MIMORay:

    解决方案很简单,使用 setTimeout 延迟出发,当频繁出发onscroll 事件时,总是取消上次的setTimeout,当然,要注意如果函数已经执行ajax请求了,那么这个时候就不需要再触发加载事件了

    2010-08-27 00:06 [回复]
  4. 沙发
    hfahe:

    回复 MIMORay:嗯 腾讯微博就是用clearTimeout来解决的。

    2010-08-28 16:06 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐