juqery 下拉加载数据
html 代码 一开始是需要显示的第一页
<div class="hot-product f15 fixed-Width clearfix" id="goods2"> <volist name="goods" id="goods_vo"> <div class="item2"> <div class="H_shangpin" style="background: url('{$goods_vo['banner'][0]}') no-repeat center ;background-size: contain"></div> <div class="item3"> <p class="H_xianzhi">【{$goods_vo['fenlei']}】{$goods_vo['title']}</p> <p class="color-red"> <span>￥{$goods_vo['pay']}</span> <i class="color-b5 h_commodity fr"><del>￥{$goods_vo['yuan_pay']}</del></i> </p> <div class="clearfix shangpinming"> <p class="color-b5 h_commodity fl"><span>{$goods_vo['weizhi']}</span><span>{$goods_vo['shang_name']}</span></p> <p class="fr color-b5 h_commodity ">{$goods_vo['time']}</p> </div> </div> </div> </volist> </div>
自动监听下拉，当往下拉的时候就开始访问你指定的控制器
/*下拉分页*/ var nextp = "{$nextp}";//第几页 var oknext = 1;//加载开关 $(window).scroll(function () { var di = $(window).scrollTop();//获取当前滚动条的位置 var ph = $(window).height();//当前窗口高度 di = di + ph;//最高拉到多少 var h = $(document).height();//允许多长滚动条 if (h - di < 100) { if (nextp > 0 && oknext == 1) { oknext = 0; $.post("{:U('Index/goods')}", {p:nextp}, function (v) {//指定访问的控制器 if(v.index == 2){//这里我是做了一个判断，当需要一排显示两个就走if 当需要一排显示一个的时候就走else if (v.status) { oknext = 1; nextp = v.nextp; var list = v.list; //console.log(list); var html = ''; for (var i = 0; i < list.length; i++) { html +='<div class="item2">'+ '<div class="H_shangpin" style="background: url('+list[i]['banner'][0]+') no-repeat center ;background-size: contain"></div>'+ '<div class="item3"><p class="H_xianzhi">【'+list[i]['fenlei']+'】'+list[i]['title']+'</p>'+ '<p class="color-red"><span>￥'+list[i]['pay']+'</span>'+ '<i class="color-b5 h_commodity fr"><del>￥'+list[i]['yuan_pay']+'</del></i>'+ '</p>'+ '<div class="clearfix shangpinming">'+ '<p class="color-b5 h_commodity fl"><span>'+list[i]['weizhi']+'</span><span>'+list[i]['shang_name']+'</span></p>'+ '<p class="fr color-b5 h_commodity ">'+list[i]['time']+'</p>'+ '</div>'+ '</div>'+ '</div>'; } $("#goods2").append(html); } }else{ if (v.status) { oknext = 1; nextp = v.nextp; var list = v.list; var html = ''; for (var i = 0; i < list.length; i++) { html +='<div class="clearfix H2_pad">'+ '<div class="H2_shangpin fl" style="background: url('+list[i]['banner'][0]+') no-repeat center ;background-size: cover"></div>'+ '<div class="H2_xinxi fl">'+ '<div class="H2_xianzhi">【'+list[i]['fenlei']+'】'+list[i]['title']+'</div>'+ '<div><span class="color-red">￥'+list[i]['pay']+'</span><span class="color-b5 h_commodity fr">'+list[i]['time']+'</span>'+ '</div>'+ '<div class="color-b5 h_commodity">'+ '<del>￥'+list[i]['yuan_pay']+'</del> <span class="fr"><i class="ICON-tousu h_tousu"></i>'+ '<i class="ICON-fen-LOVE '+list[i]['love']+'" data-guanzhu-id="'+list[i]['id']+',2"></i> </span>'+ '</div>'+ '</div>'+ '</div>' } $("#goods1").append(html); } } }, 'json'); } } });
控制器方法
/* **全部商品 ** ***/ public function goods(){ $p = I('p',1); $where['status'] = 1; if(I('id') != 0){ $where['fenlei_id'] = I('id'); } $this->index = M('xinxi_goods_if')->getField('index');//首页商品显示问题 单排显示1 还是双排显示2 $count = M('xinxi_goods')->where($where)->count(); $goods = M('xinxi_goods')->where($where)->field('id,title,ben_fenlei_id,uid,weizhi_id,yuan_pay,pay,banner,time,num,admin_user')->order('time DESC')->page($p,6)->select(); $nextpage=$count/6>$p?$p+1:''; if($p == 1){//第一页的时候显示页面并显示第一个的数据 $this->nextp=$nextpage; foreach($goods as $k=>$r){ $goods[$k]['time'] = get_date($r['time']); $goods[$k]['banner'] = explode(',',$r['banner']); /*商铺店名*/ if(!$r['uid']){ $goods[$k]['shang_name'] = $r['admin_user']; }else{ $name = get_yonghu($r['uid'],'shang_name'); if(!$name){ $goods[$k]['shang_name'] = ''; }else{ $goods[$k]['shang_name'] = $name; } } /*商品分类*/ $goods[$k]['fenlei'] = M('xinxi_fenlei')->where(array('id'=>$r['ben_fenlei_id']))->getField('title'); /*商城位置ID*/ $goods[$k]['weizhi'] = M('xinxi_weizhi')->where(array('id'=>$r['weizhi_id']))->getField('title'); $guanzhu_where['status'] = 1; $guanzhu_where['shibie'] = 2; $uid = session('uid'); if($uid != ''){ $guanzhu_where['uid'] = $uid; $guanzhu_id = M('xinxi_guanzhu')->where($guanzhu_where)->getField('goods_user'); if($guanzhu_id == $r['id']){ $goods[$k]['love'] = 'active'; }else{ $goods[$k]['love'] = ''; } }else{ $goods[$k]['love'] = ''; } } $this->assign('goods',$goods); $this->display(); }else{ //第二页的时候就开始返回json数据 //并显示抛回这是第几页 $this->nextp=$nextpage; foreach($goods as $k=>$r){ $goods[$k]['time'] = get_date($r['time']); $goods[$k]['banner'] = explode(',',$r['banner']); /*商铺店名*/ if(!$r['uid']){ $goods[$k]['shang_name'] = $r['admin_user']; }else{ $name = get_yonghu($r['uid'],'shang_name'); if(!$name){ $goods[$k]['shang_name'] = ''; }else{ $goods[$k]['shang_name'] = $name; } } /*商品分类*/ $goods[$k]['fenlei'] = M('xinxi_fenlei')->where(array('id'=>$r['ben_fenlei_id']))->getField('title'); /*商城位置ID*/ $goods[$k]['weizhi'] = M('xinxi_weizhi')->where(array('id'=>$r['weizhi_id']))->getField('title'); $guanzhu_where['status'] = 1; $guanzhu_where['shibie'] = 2; $uid = session('uid'); if($uid != ''){ $guanzhu_where['uid'] = $uid; $guanzhu_id = M('xinxi_guanzhu')->where($guanzhu_where)->getField('goods_user'); if($guanzhu_id == $r['id']){ $goods[$k]['love'] = 'active'; }else{ $goods[$k]['love'] = ''; } }else{ $goods[$k]['love'] = ''; } } $data['index'] = M('xinxi_goods_if')->getField('index');//首页商品显示问题 单排显示1 还是双排显示2 $data['list']=$goods; $data['nextp']=$nextpage; $data['status']=1; echo json_encode($data); } }
