zoukankan      html  css  js  c++  java
  • 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);
            }
        }
  • 相关阅读:
    KlayGE的PNTriangle例子支持Instanced Tessellation了
    KlayGE中的延迟渲染(一)
    KlayGE中的延迟渲染(五)完结篇
    KlayGE中的延迟渲染(二)
    KlayGE中的延迟渲染(三)
    KlayGE中的延迟渲染(四)
    几大移动平台的纯C/C++开发调查
    用2个float模拟double
    开放的3D扫描人头数据!
    IP 点分十进制表示法
  • 原文地址:https://www.cnblogs.com/zc290987034/p/8125386.html
Copyright © 2011-2022 走看看