zoukankan      html  css  js  c++  java
  • html ajax请求 php 下拉 加载更多数据 (也可点击按钮加载更多)

    <input type="hidden" class="total_num" id="total" value="{$total}">
    <div class="diy-richtext messagebox" style="padding-top:10px;">
        {loop $messagelist $k $v}
            <div class="message" rel='{$k}'>
                <p class="message_icon"><img width="21" alt="" height="20" style=" 20px; height: 20px;" src="../addons/ewei_shopv2/static/img/icon{$v['cateid']}.png" data-lazyloaded="true"></p>
                <p class="message_cate" >&nbsp;&nbsp;{$v['cate_name']}</p>
                <p class="message_title" >{$v['title']}
                <span class="message_time" >{php echo date('Y-m-d H:i:s',$v['createtime']);}</span><br>
                <p >{$v['detail']}<br>
                </p><p><br>
                </p>
            </div>
        {/loop}
    </div>
    
    <div class="fui-picturew row-4" onclick="getmore()" >加载更多..</div>
       $(function() {
        
           $(window).scroll(function(){
                var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
                var scrollHeight = $(document).height();   //当前页面的总高度
                var clientHeight = $(this).height();    //当前可视的页面高度
        
                if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 count++;         //每次滑动count加1
                 //   filterData(serviceTypeId,industryId,cityId,count); //调用筛选方法,count为当前分页数
                    getmore();
                }
           }); 
           
       }); 
       
        function getmore(){
     
                var total = $('#total').val()
                FoxUI.loader.show('mini');
                var data = {'classid': "{$classitem['id']}", 'merchid': "{$item['id']}", 'k': total};
                $.ajax({
                    url: "{php echo mobileUrl('shop/category/getmoreMessage')}",
                    data: data,
                    cache: false
                }).done(function (result) {
                    var data = jQuery.parseJSON(result);
                    FoxUI.loader.hide();
                    if (data.status == 1) {
                        if(data.result.code == 1){
                               $('.messagebox').append(data.result.html);
                           $('#total').val(data.result.total);
                        }else if(data.result.code == 2){
                            FoxUI.toast.show ('暂无更多')
                        }
    
                    } else {
                        alert("微信接口繁忙,请稍后再试!");
                        
                    }
                });  
        }                
        public function main()//显示页面
        {
            global $_W;
            
            $total = 6;//默认加载条数
            $limit = " limit 0,$total";
            $messagelist = pdo_fetchall('SELECT * FROM ' . tablename('ewei_shop_merch_message').'where displayorder = :displayorder order by id desc'.$limit, array(':displayorder'=>0));     
    
            // var_dump($messagelist);exit;
            include $this->template();
        }
        public function getmoreMessage()//ajax下拉页面
        {
            global $_W;
            global $_GPC;
    
            $rel = isset($_GPC['k'])?$_GPC['k']:0;
            $where = "1" ;
            $offset = $rel;
            $offnum = 4;
            $where .= " order by id desc" ;
            $where .= " limit $offset,$offnum" ;
            $total = $offset + $offnum;
            $list = pdo_fetchall('SELECT * FROM ' . tablename('ewei_shop_merch_message') . ' WHERE '.$where);
            $html = '';
            foreach ($list as $k => $v) {
                $cateid = $v['cateid'];
                $html.='<div class="message" rel="'.$k.'">
                    <p class="message_icon"><img width="21" alt="" height="20" style=" 20px; height: 20px;" src="../addons/ewei_shopv2/static/img/icon'.$cateid.'.png" data-lazyloaded="true"></p>
                    <p class="message_cate" >&nbsp;&nbsp;'.$v['cate_name'].'</p>
                    <p class="message_title" >'.$v['title'].'
                    <span class="message_time" >'.date('Y-m-d H:i:s',$v['createtime']).'</span><br>
                    <p >'.$v['detail'].'<br>
                    </p><p><br>
                    </p>
                </div>';
            }
            
            
            if($list){
                  $arr = array('code' => 1, 'msg' => '','html'=>$html,'total'=>$total);
                show_json(1, $arr);           
            }else{
                   $arr = array('code' => 2, 'msg' => '暂无更多.',);
                show_json(1, $arr);  
            }
        }   

    public function getmoreMessage()//ajax下拉页面
    {
    global $_W;
    global $_GPC;

    $rel = isset($_GPC['k'])?$_GPC['k']:0;
    $where = "1" ;
    $offset = $rel;
    $offnum = 4;
    $where .= " order by id desc" ;
    $where .= " limit $offset,$offnum" ;
    $total = $offset + $offnum;
    $list = pdo_fetchall('SELECT * FROM ' . tablename('ewei_shop_merch_message') . ' WHERE '.$where);
    $html = '';
    foreach ($list as $k => $v) {
    $cateid = $v['cateid'];
    $html.='<div class="message" rel="'.$k.'">
    <p class="message_icon"><img width="21" alt="" height="20" style=" 20px; height: 20px;" src="../addons/ewei_shopv2/static/img/icon'.$cateid.'.png" data-lazyloaded="true"></p>
    <p class="message_cate" >&nbsp;&nbsp;'.$v['cate_name'].'</p>
    <p class="message_title" >'.$v['title'].'
    <span class="message_time" >'.date('Y-m-d H:i:s',$v['createtime']).'</span><br>
    <p >'.$v['detail'].'<br>
    </p><p><br>
    </p>
    </div>';
    }


    if($list){
    $arr = array('code' => 1, 'msg' => '','html'=>$html,'total'=>$total);
    show_json(1, $arr);
    }else{
    $arr = array('code' => 2, 'msg' => '暂无更多.',);
    show_json(1, $arr);
    }
    }

  • 相关阅读:
    使用 yo 命令行向导给 SAP UI5 应用添加一个新的视图
    SAP Fiori Elements 应用的 manifest.json 文件运行时如何被解析的
    SAP UI5 标准应用的多语言支持
    微软 Excel 365 里如何设置下拉菜单和自动高亮成指定颜色
    SAP Fiori Elements 应用里的 Title 显示的内容是从哪里来的
    本地开发好的 SAP Fiori Elements 应用,如何部署到 ABAP 服务器上?
    如何在 Cypress 测试代码中屏蔽(Suppress)来自应用代码报出的错误消息
    教你一招:让集群慢节点无处可藏
    应用架构步入“无服务器”时代 Serverless技术迎来新发展
    MySQL数据库事务隔离性的实现
  • 原文地址:https://www.cnblogs.com/liiu/p/10071980.html
Copyright © 2011-2022 走看看