滚动加载更多

/**
 * 异步加载更多
 * create by tujia @2016.10.19
 */
function load_more(id,no_more){
    var _id         = id || ‘lists‘;
    var _no_more     = no_more || ‘<li style="line-height: 4rem; text-align: center; font-size: 1rem; color: #717171;">没有更多啦</li>‘;

    var dH = 0,wH = 0,page_no = 1,can_loading = true;
    $(document).ready(function(){
        dH = $(document).height();
        wH = $(window).height();
    });
    $(window).scroll(function(){
        var offset_top = $(this).scrollTop();

        if(can_loading==true && (dH-offset_top-wH)<100){
            can_loading = false;
            $.get(‘‘, {‘is_ajax‘:1, ‘page_no‘:++page_no}, function(res){
                if(res!=‘‘){
                    $(‘#‘+_id).append(res);
                    dH         = $(document).height();
                    can_loading = true;
                }else{
                    $(‘#‘+_id).append(_no_more);
                }
            }, ‘html‘);
        }
    });
}
时间: 2024-12-18 04:37:42

滚动加载更多的相关文章

下拉滚动加载更多数据

简单地实现一个下拉滚动时加载更多数据的效果.这种效果经常在手机端.瀑布流时看到 1 KISSY.add('load',function(S,Core,IO,XTemplate){ 2 var $ = S.all, D = S.DOM, E = S.Event; 3 var API = { 4 'query':'query.do' 5 }; 6 var tpl = '{{#each result}}'+ 7 '<tr>'+ 8 '<td><input type="ch

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

angularjs 滚动加载更多数据

下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据,具体的还是需要具体看待: Javascript部分的controller app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window',     function ($scope, $timeout, $window) {             $scope.showData = false;                 $scope.isLoadi

微信小程序实现滚动加载更多

1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个 4.滚动到底部绑定需要触发的事件 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='

Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多

http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function(){ if ( $(window).scrollTop() >= $(document).height() - $(window).height() ) { var strAppend = ''; for( var i = 1; i < 10; i++ ) { strAppend += '<

下拉加载更多内容(滚动加载)

最近写项目,要求实现滚动条滚动到底部的时候请求加载更多的数据.要实现此功能首先想到的就是scroll事件,经过查阅资料终于实现此功能,具体原理如下: 首先需要给div加scroll事件,监听滚动条滚动动作.滚动加载的原理:当滚动条的高度加上 滚动条到div顶部的高度 等于div的可滚动高度时,说明滚动条到底部了,此时便可以触发向服务端请求数据的ajax请求了. 判断滚动条是否滚动到底部: this.scrollHeight<=$(this).scrollTop()+$(this).height(

基于JQuery实现滚动到页面底端时自动加载更多信息

基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("ajax.

Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向

很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷新和上拉加载更多.这个组件有个mode的属性,可以设置为both,即上下同时都可拉动.但是只设置这个属性的话,上拉与下拉产生的效果是完全一致的.所以要使用这个开源项目做到下拉刷新并同时可上拉加载更多,就需要在代码中进行一些处理. ==========================pulltoref

js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如果时间内又执行了该操作则延长时间重新开始计算 /* 不做处理input触发keyup事件 */ /* 输入快的话会出现输出结果多次重复 */ window.onload = function () { let obj = document.getElementById('input') obj.ad