请问如何用js判断下拉刷新?

[hercules135]

自己尝试做上拉加载更多,没什么问题,但是做下拉刷新的时候遇到难点了

scrollTop 可以判断是否到顶,但是如何得到下拉的距离呢?(用来控制显示下拉图片和判断是否需要刷新)

另外..松开的事件又是什么?

希望能够不要用iscroll.js...谢谢各位前辈,求指点

[阿鱼]

不知道你的下拉图片是如何布局的，也不知道你讲的移动端还是pc浏览器。 暂且以常见的PC端的瀑布流（各列高度不等）为例： 假设首次加载的整个瀑布流的高度最小的一列的高度为H，那么下拉加载就可以这么写：

/**即：当文档顶部滑出的高度+当前窗口高度 >= 文档（最小）高度时，进行加载
***因为这里是按照瀑布流计算，所以取最小高度比较合适。如果你的图片是等高均匀排列的话，
***那么 等于文档高度的时候就可以进行新的加载*/
$(window).scroll(function(){
    if( ($(this).scrollTop+$(this).height())>=H ){
        $(this).unbind('scroll');
        //此处为加载新图片
    };
});

希望能帮到你。

[斯洛文尼亚旅游]

http://www.cnblogs.com/tqlin/archive/2013/03/04/2942789.html

[hercules135]

引用 1 楼 qwklove 的回复:

不知道你的下拉图片是如何布局的，也不知道你讲的移动端还是pc浏览器。 暂且以常见的PC端的瀑布流（各列高度不等）为例： 假设首次加载的整个瀑布流的高度最小的一列的高度为H，那么下拉加载就可以这么写：

/**即：当文档顶部滑出的高度+当前窗口高度 >= 文档（最小）高度时，进行加载
***因为这里是按照瀑布流计算，所以取最小高度比较合适。如果你的图片是等高均匀排列的话，
***那么 等于文档高度的时候就可以进行新的加载*/
$(window).scroll(function(){
    if( ($(this).scrollTop+$(this).height())>=H ){
        $(this).unbind('scroll');
        //此处为加载新图片
    };
});

希望能帮到你。

谢谢,但是这个功能我也写好了,有一点区别,发上来大家探讨一下

            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(this)[0].scrollHeight;
            var conHeight = $(this).height();

            //$("#test").html("scrollTop:" + scrollTop + "<br/>scrollHeight:" + scrollHeight + "<br/>conHeight:" + conHeight);

            if (scrollTop + conHeight >= scrollHeight - 100) {
               //TODO
            }

另外我需求的功能是常规APP中都有的 往下拉页面,可以刷新当前页面,目前我实现不了,所以只做了一个很low的按钮实现刷新功能... 补充:运行环境是手机浏览器

[阿鱼]

引用 2 楼 hercules135 的回复:

另外我需求的功能是常规APP中都有的 往下拉页面,可以刷新当前页面,目前我实现不了,所以只做了一个很low的按钮实现刷新功能... 补充:运行环境是手机浏览器

scroll这个事件在pc和手机上应该是通用的，上面的$(window).scroll你可以试一下。 如果对js用的不是特别熟，想自己写出比较好的效果是有点难度的。 用插件效果最好，用起来也最方便。