不废话，这里直接上源代码，可能遇到的常见问题如下：

常见问题：

1、下拉无法加载

使用Google Chrome浏览器访问按F12，查看控制台中是否存在js错误。

2、下拉重复显示

请确认排序是否一致

例如：前台调用标签 Order by updatetime DESC 是否与后端php SQL查询一致。

HTML部分

    <div id="lists">
    {pc:get sql="SELECT * FROM `rong_sheji` Order by updatetime DESC " num="12"}
    {loop $data $n $r}
       <figure>
        <a href="{$r[url]}">
          <div data-echo-background="{$r[thumb]}" style="background-image: url({$r[thumb]});"></div>
          <figcaption>
          <div class="right">
            <h3>{$r[title]}</h3>
            <small>{date('Y-m-d',$r[inputtime])}</small>
          </div>
          <div class="left">
            <span><i class="fa fa-heart-o"></i><small></small></span>
          </div>
          </figcaption>
        </a>
      </figure>
    {/loop}	
	{/pc} 
    </div>
    <div class="loadmore">
        <a id="loading" href="javascript:void(0);" style="display: block;">加载完成</a>
        </div>

JavaScript脚本部分

$(function(){
  var pager=1; /*定义开始页码*/
  var controller=true; /*定义控制器,防止重复加载*/
  $(window).scroll(function() { 
  /*监听滚动事件*/
      /*当内容滚动到底部时加载新的内容(注：当距离最底部100个像素时开始加载)*/
      if ($(this).scrollTop() + $(window).height() + 430 >= $(document).height() && $(this).scrollTop() > 430) {
         $("#loading").html("正在加载").show(); /*打开加载提示*/ 
         if(controller==true){/*如果控制器是开的*/
            controller=false;/*关闭加载*/
            pager=pager+1;/*当前要加载的页码*/		
            $.getJSON("{APP_PATH}api.php?op=sheji&page="+pager, function(data){

                  var i=0;

                  $.each(data,function(r){
                      i++;

                      var html='<figure><a href="'+data[r].url+'"><div data-echo-background="'+data[r].thumb+'" style="background-image: url('+data[r].thumb+');"></div><figcaption><div class="right"><h3>{$r[title]}</h3><small>{date('Y-m-d',$r[inputtime])}</small></div><div class="left"><span><i class="fa fa-heart-o"></i><small></small></span></div></figcaption></a></figure>';
                      
                      /*示例

                      var html='<a href="'+data[r].url+'">
                        <img src="'+data[r].thumb+'">
                        <dl>
                            <dt>['+data[r].catname+'] '+data[r].title+' - '+data[r].updatetime+'</dt>
                            <dd>'+data[r].description+'</dd>
                        </dl>
                      </a>';

                      */

                      $("#lists").append(html);/*追加到列表中*/

                  });/*end each*/

                  controller=true;/*开启加载*/
                  $("#loading").hide(); /*关闭加载提示*/ 

                  if(i==0){ 
                     $("#loading").html("加载完成").show();  
                  }

              });/*end getJSON*/
        
        
          }/*end if*/
          
      }/*end if*/
    });/*end scroll*/  
});/*end function*/

php接口部分

<?php
#融网科技二次开发，直接取数据库表内容，单独调用字段#
defined('IN_PHPCMS') or exit('No permission resources.'); 

$db = '';
#加载内容模型
$db = pc_base::load_model('content_model');
#重定义加载的表名
$db->table_name = 'rong_sheji';

#加载缓存中的栏目名称,注 category_content_站点ID
$CATEGORYS = getcache('category_content_1','commons');

$page=isset($_GET['page'])?intval($_GET['page']):1;
#判断传入的page是否存在

#查询表数据
$data = $db->select(
	'status=99 ORDER BY `id` DESC LIMIT '.($page-1)*8 .' , ' . 8 .' '#根据实际情况调整where语句
	,'id,catid,title,thumb,url' #需要调取的字段,如需要全部字段则删除本段
);

#定义数组容器
$array=array();
#遍历查询到的数组，注：如不需要对 图片、时间、栏目进行转换可跳过遍历直接将$data输出
foreach ($data as $key => $value) {
		$array[]=array(
			"id"=>$value['id'],
			"title"=>$value['title'],
			"thumb"=>$value['thumb'],
			"url"=>$value['url']
		);
}

#将数组转换为json数据并输出
echo json_encode($array); 
?>

关键词：PHPCMS

转载请注明来自:https://www.kufan.cn/news/45.html

上一篇：小程序二维码码是这样绽放的，你一定不知道

下一篇：企业SEO站内优化到底应该注意那些细节问题？