帝国cms栏目页ajax下拉刷新无限加载插件

8232021-05-02 13:53:57

本文目录

1. 帝国cms栏目页无限加载html
2. 帝国cms栏目页ajax无限加载jQuery代码
3. ajax无限加载原理

帝国cms是一款相当好用的cms，但栏目页默认是分页模式，不支持ajax加载，而ajax无限加载在实际应用中的体验又非常好。那么，我们要怎样做栏目页的无限加载呢？

帝国cms栏目页ajax下拉刷新无限加载插件

帝国cms栏目页无限加载html

html部分没有太大的参考价值，这里就不做分享了。但有2个问题需要注意：

1、赋值变量classid

<script>
    var classid = '<?=$GLOBALS[navclassid]?>';
</script>

2、引入jQuery，例如百度jQuery

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

本站提供全部版本的jQuery在线引入地址，可查看：jQuery全部版本线上地址

帝国cms栏目页ajax无限加载jQuery代码

<script>
var b = 0;
    t = 0;
    i = 1;
    isbool=true;
    wwidth=$(window).width();
$(window).scroll(function(){
    t = $(this).scrollTop();
    if(b < t){
        var scrollPos = $(window).scrollTop();
        if(wwidth<750){
            winPos=($(document).height())/2-100;
        }else{
            winPos=($(document).height()-900);
        }
        if(scrollPos > winPos && isbool==true ) {
            isbool=false;
    		$.ajax({
    			url : '/e/action/ajaxmore.php',
    			type:'POST',
    			data:{
    				"next":i,
    				'table':'news',
    				'action':'getmorenews',
    				'limit':20,
    				'classid':classid,
    				'small_length':120,
    				'pagetype':'news'
    			},
    			dataType : 'html',
    			beforeSend:function(){
    				$(".loading").show();
    			},
    			success : function(data){
    				$(".loading").hide();
    			    isbool=true;
    				if(data){
    					$(".content").append(data);
    					i++;
    				}else{
    					$(".loading-end").show();
    					return false;
    				}
    			}
    		});
        }
    }else{
        console.log('向上滚动中...')
    }
    setTimeout(function(){
        b = t
    }, 0)
});
</script>