jizhicms 加载更多,滚动底部自动加载

发布于:2021-04-03 15:57:39

<ul class="ul-list-d1">
					{if($lists)}
					{foreach $lists as $v}
	                <li class="row-b2 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0s">
	                    <a href="{$v['url']}">
	                        <div class="m-txt">
	                            <div class="tit">
	                                <h3>{$v['title']}</h3>
	                                <img src="images/d-icon1.png" />
	                            </div>
	                            <p class="work">{$v['zhicheng']}</p>
	                            <p>{fun newstr($v['description'],150)}</p>
	                        </div>
	                        <div class="pic">
	                            <img src="{if($v['litpic']=='')}{$tpl}assets/img/tech/image4.jpg{else}{$v['litpic']}{/if}" />
	                        </div>
	                    </a>
	                </li>
					{/foreach}
					{else}
					<p>暂时没有数据~</p>
					{/if}
	            </ul>
	            <div class="b-more  wow fadeInUp animated" style="animation-duration: 1s; animation-delay: 0.6s;">
	                <a href="javascript:;" id="gomore">加载更多</a>
	            </div>


js 滚动到底部加载

<script>
<!--判断端口,手机端下拉加载-->

var p={$frpage};
var istrue = true;
$(window).scroll(function () {
	//判断是否滑动到页面底部
	
	if ($(window).scrollTop() === ($(document).height() - $(window).height()) ) {
		//防止过度加载
		if(!istrue){
			return false;
		}
		p+=1;
		var tid = {$type['id']};
		var molds = "{$type['molds']}";
		//Screen/index/molds/$1/tid/$2/jz_screen/$3
		$.ajax({
			url:window.location.href,//请求的url地址
			// dataType:"json",//返回格式为json
			async:true,//请求是否异步,默认为异步,这也是ajax重要特性
			data:{tid:tid,molds:molds,ajax:1,ajax_tpl:1,page:p},//参数值
			type:"GET",//请求方式
			beforeSend:function(){
				//请求前的处理
				istrue = false;
				
			},
			 success:function(r){
				if(r==1){
					$('#gomore').text('没有了')
					return false;
				}
				$(".ul-list-d1").append(r);
					
			},
			complete:function(){
			//请求完成的处理
				istrue = true;
			},
			 error:function(){
			//请求出错处理
				$('#gomore').text('网络错误')
			}

					
			
		})
	}
})


   </script>


点击加载更多的时候触发

<script>
<!--判断端口,手机端下拉加载-->

var p={$frpage};
var istrue = true;
$('#gomore').click(function () {
	//判断是否滑动到页面底部
	
		//防止过度加载
		if(!istrue){
			return false;
		}
		p+=1;
		var tid = {$type['id']};
		var molds = "{$type['molds']}";
		//Screen/index/molds/$1/tid/$2/jz_screen/$3
		$.ajax({
			url:window.location.href,//请求的url地址
			// dataType:"json",//返回格式为json
			async:true,//请求是否异步,默认为异步,这也是ajax重要特性
			data:{tid:tid,molds:molds,ajax:1,ajax_tpl:1,page:p},//参数值
			type:"GET",//请求方式
			beforeSend:function(){
				//请求前的处理
				istrue = false;
				
			},
			 success:function(r){
				if(r==1){
					$('#gomore').text('没有了')
					return false;
				}
				$(".ul-list-d1").append(r);
					
			},
			complete:function(){
			//请求完成的处理
				istrue = true;
			},
			 error:function(){
			//请求出错处理
				$('#gomore').text('网络错误')
			}

					
			
		})
})


   </script>


觉得有用请点个赞吧!
0 625