使用light7库无线滚动加载

于 2016-08-06 11:06:29 发布
阅读量4k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： 无限滚动加载数据 js php sqlserver
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangzeqin123/article/details/52135065
本文介绍了一个基于PHP和JavaScript实现的物料报价查询系统。该系统通过前端界面接收查询条件，使用AJAX技术异步请求后端数据，并实现了无限滚动加载功能以优化用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif;"> <!-- 这里是页面内容区 --></span>
  <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
    <div class="list-container" id="wlbj_content">
         
    </div>
  <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader" style="display:none;" >
              <div class="preloader"></div>
          </div>
  </div>


界面:



点击查询后执行的js 先查出5条数据 php代码 controller

	public function wlselect(){
		$mc = I('mc','');
		$lx = I('lx',1);
		$begin_rq = I('begin_rq','');
		$end_rq = I('end_rq','');
		$page = I('page',1);
		$num = I('num',5);

	

		$sql = '';
		if($lx == 1){
			if($mc != '' and $mc!= '所有客户'){
				$sql .= " and khmc = '$mc' ";
			}
			if($begin_rq != '' and $end_rq != ''){
				$sql .= " and riqi between '$begin_rq' and '$end_rq' ";
			}
			
			$wl = D('Bj')->wlbj($sql,$num,$page,'wlxsgzbj');

			$this->fz($wl,'khwlbj',$sql);
}
}

//根据参数(查询语句)封装数据并返回
	public function fz($sql,$lx,$tj){
		$result = M()->query($sql);
		switch ($lx) {
			case 'khwlbj':
				$sqlcount = "select count(id)count from wlxsgzbj where 1=1 $tj ";
				$count = M()->query($sqlcount);
				$count = $count[0]['count'];
				break;
			
			default:
				# code...
				break;
		}
		if($result){
			$json = $result;
			$json['length'] = count($result);
			$json['count'] = $count;
			$json['status'] = 1;
		}else{
			$json['status'] = 0;
		}
		//$json['sql'] = $sql;
		$this->ajaxReturn($json,'json');
	}


model 使用的sql server数据库
/**
	 * 物料报价
	 */
	public function wlbj($data,$num,$page,$table){
		$sql = "SELECT id,mc,wlmc,jg,lsjg,zgj,zdj,rq,gg,ysmc
				FROM
				    (
				        SELECT ROW_NUMBER() OVER (ORDER BY id) AS RowNumber,id,gg,khmc as mc,wlmc,jg,lsjg,zgj,zdj,convert(char(10),riqi,120) as rq,ysmc FROM $table where 1=1 $data
				    )   as A  
				WHERE RowNumber between $page and $num";
		return $sql;
	}


/*
 * 物料报价
 */
function wlbj() {
	//删除所有子元素
	removeAllChild('wlbj_content');
	if ($('#lx').val() == '1') {
		var mc = $(".inkhmc").val();
	} else if ($('#lx').val() == '2') {
		var mc = $(".inghsmc").val();
	} else if ($('#lx').val() == '3') {
		var mc = $(".injgsmc").val();
	}
	var lx = $("#lx").val();
	var begin_rq = $("[name='begin_rq']").val();
	var end_rq = $("[name='end_rq']").val();
	var url = getUrl(location.href);
	pagenum = 1;
	num = 5;
	$.showIndicator();
	disbtn();
	$.getJSON(
		url, {
			mc: mc,
			lx: lx,
			begin_rq: begin_rq,
			end_rq: end_rq
		},
		function(json) {
			if (json.status == 1) {
				//	如果总数大于5 则开启滚动加载
				if (json.count > 5) {
					lastIndex = 5;
					$.attachInfiniteScroll($('.infinite-scroll'));
					maxItems = json.count;
				}
				$.hideIndicator();
				btn();
				for (var i = 0; i < json.length; i++) {
					$('.list-container').append("<div class='card card-font'><div class='card-header'><span class='col-50'><i class='icon kehu'></i>:<b>" + json[i]['mc'] + "</b></span><span class='col-50 card-dq'><i class='icon riqi'></i>:" + json[i]['rq'] + "</span></div><div class='card-content'><div class='card-content-inner'><div class='row'><span class='col-50'><i class='icon wuliao'></i>:" + json[i]['wlmc'] + "</span><span class='col-50 '>历史价：" + parseFloat(json[i]['lsjg']) + "元</span></div><div class='row'><span class='col-50'><i class='icon guige'></i>:" + json[i]['gg'] + "</span><span class='col-50'>最高价：" + parseFloat(json[i]['zgj']) + "元</span></div><div class='row'><span class='col-50'><i class='icon yanse'></i>:" + json[i]['ysmc'] + "</span><span class='col-50 '>最低价：" + parseFloat(json[i]['zdj']) + "元</span></div><div classs='row'><span class='col-50 color-primary'><i class='icon jiner'></i>:" + parseFloat(json[i]['jg']) + "元</span></div></div></div>");
				}

			}
			if (json.status == 0) {
				$.hideIndicator();
				btn();
				$.toast("未找到相应的记录");
			}
		});
}


无限滚动js

$(document).on("pageInit", "#baojia-wl", function(pageId, $page) {
    // 上次加载的序号
	lastIndex = 5;
	// 加载flag
	var loading = false;
	var url = ThinkPHP['MODULE'] + '/Bj/wlselect';

	
	function addItems() {
		pagenum += 5;
		num += 5;
<span style="white-space:pre">		</span><pre name="code" class="javascript"><span style="white-space:pre">		</span>if ($('#lx').val() == '1') {
	<span style="white-space:pre">	</span>	var mc = $(".inkhmc").val();
<span style="white-space:pre">	</span>	} else if ($('#lx').val() == '2') {
		var mc = $(".inghsmc").val();
<span style="white-space:pre">	</span>	} else if ($('#lx').val() == '3') {
<span style="white-space:pre">	</span>		var mc = $(".injgsmc").val();
<span style="white-space:pre">	</span>	}
<span style="white-space:pre">	</span>	var lx = $("#lx").val();
	<span style="white-space:pre">	</span>var begin_rq = $("[name='begin_rq']").val();
	<span style="white-space:pre">	</span>var end_rq = $("[name='end_rq']").val();
	<span style="white-space:pre">	</span>var url = getUrl(location.href);

$.getJSON(url, {mc: mc,lx: lx,page: pagenum,num: num,begin_rq: begin_rq,end_rq: end_rq},function(json) {if (json.status == 1) {for (var i = 0; i < json.length; i++) {$('.list-container').append("<div class='card card-font'><div class='card-header'><span class='col-50'><i class='icon kehu'></i>:<b>" + json[i]['mc'] + "</b></span><span class='col-50 card-dq'><i class='icon riqi'></i>:" + json[i]['rq'] + "</span></div><div class='card-content'><div class='card-content-inner'><div class='row'><span class='col-50'><i class='icon wuliao'></i>:" + json[i]['wlmc'] + "</span><span class='col-50 '>历史价：" + parseFloat(json[i]['lsjg']) + "元</span></div><div class='row'><span class='col-50'><i class='icon guige'></i>:" + json[i]['gg'] + "</span><span class='col-50'>最高价：" + parseFloat(json[i]['zgj']) + "元</span></div><div class='row'><span class='col-50'><i class='icon yanse'></i>:" + json[i]['ysmc'] + "</span><span class='col-50 '>最低价：" + parseFloat(json[i]['zdj']) + "元</span></div><div classs='row'><span class='col-50 color-primary'><i class='icon jiner'></i>:" + parseFloat(json[i]['jg']) + "元</span></div></div></div>");}}});}// 注册'infinite'事件处理函数$(document).on('infinite', '.infinite-scroll-bottom', function() {// 如果正在加载，则退出if (loading) return;$('.infinite-scroll-preloader').show();// 设置flagloading = true;// 模拟1s的加载过程setTimeout(function() {// 重置加载flagloading = false;if (lastIndex >= maxItems) {// 加载完毕，则注销无限加载事件，以防不必要的加载$.detachInfiniteScroll($('.infinite-scroll'));// 删除加载提示符$('.infinite-scroll-preloader').hide();$.toast("已到达最底部");return;}// 添加新条目addItems();// 更新最后加载的序号lastIndex += 5;}, 1000);});} 




                

        

    

    
  



    

      

        

            

              
                
                  Sunrise清风
                
              
            

            

                关注
              
            

        

        

          
      

      










            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值