PHPCMS V9 实现下拉加载的方法,兼容手机端(附源码下载)

 寇玉鑫   2019-02-14 09:37   1934 人阅读  8 条评论

PHPCMS V9 实现下拉加载的方法,兼容手机端

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--列表-->
<div id="lists">
    <!--本示例显示所有最新文章,根据实际情况自行调整-->
    {pc:get sql="SELECT * FROM `v9_news` where status=99 Order by updatetime DESC " num="10"}
    {loop $data $n $r}
 
    <a href="{$r[url]}">
      <img src="{thumb($r[thumb],520,160)}">
      <!--自动缩放裁剪图片大小520x160-->
      <dl>
          <dt>[{$CATEGORYS[$r[catid]][catname]}] {$r[title]} - {date('m/d',$r[inputtime])}</dt>
          <!--$CATEGORYS 调用缓存栏目名称-->
          <dd>{str_cut($r[description],200)}</dd>
          <!--描述截取200个字符-->
      </dl>
    </a>
 
    {/loop}  
    {/pc} 
 
</div>
<!--
 
    示例:
 
    {链接}
    {图片}
    [{栏目}]{标题} - {时间}
    {描述}
 
-->
 
 
 
<!--加载提示-->
<div id="loading" style="display:none"></div>


JavaScript脚本部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
$(function(){
  var pager=1; /*定义开始页码*/
  var controller=true/*定义控制器,防止重复加载*/
  $(window).scroll(function() { 
  /*监听滚动事件*/
      /*当内容滚动到底部时加载新的内容(注:当距离最底部100个像素时开始加载)*/
      if ($(this).scrollTop() + $(window).height() + 100 >= $(document).height() && $(this).scrollTop() > 100) {
         $("#loading").html("加载中,请稍后...").show(); /*打开加载提示*/ 
         if(controller==true){/*如果控制器是开的*/
            controller=false;/*关闭加载*/
            pager=pager+1;/*当前要加载的页码*/  
            $.getJSON("{APP_PATH}api.php?op=autoload&page="+pager, function(data){
 
                  var i=0;
 
                  $.each(data,function(r){
                      i++;
 
                      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>';
                       
                      /*示例
 
                      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*/
</script>


PHP部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
defined('IN_PHPCMS'or exit('No permission resources.'); 
 
$db '';
#加载内容模型
$db = pc_base::load_model('content_model');
#重定义加载的表名
$db->table_name = 'v9_news';
 
#加载缓存中的栏目名称,注 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)*10 .' , ' . 10 .' '#根据实际情况调整where语句
    ,'id,catid,title,style,thumb,description,url,updatetime,inputtime,username' #需要调取的字段,如需要全部字段则删除本段
);
 
#定义数组容器
$array=array();
#遍历查询到的数组,注:如不需要对 图片、时间、栏目进行转换可跳过遍历直接将$data输出
foreach ($data as $key => $value) {
        $array[]=array(
            "id"=>$value['id'],
            "title"=>$value['title'],
            "style"=>$value['style'],
            "thumb"=>$value['thumb']?thumb($value['thumb'],520,160):"",
            "description"=>str_cut($value['description'],200),
            "url"=>$value['url'],
            "updatetime"=>date('m/d',$value['updatetime']),
            "inputtime"=>date('m/d',$value['inputtime']),
            "username"=>$value['username'],
            "catname"=>$CATEGORYS[$value['catid']]['catname']
        );
}
 
 
#将数组转换为json数据并输出
echo json_encode($array);


常见问题

1、下拉无法加载

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


2、下拉重复显示

请确认排序是否一致

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


此处为隐藏内容,请评论后查看隐藏内容,谢谢!

本文地址:http://www.kouyuxin.com/article/265.html
温馨提示:文章内容系作者个人观点,不代表寇玉鑫自媒体对观点赞同或支持。
版权声明:本文为转载文章,来源于 寇玉鑫 ,版权归原作者所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 免费节点
    免费节点  @回复

    学习学习了:)感谢分享!

  2. 今日新闻
    今日新闻  @回复

    文章不错非常喜欢

  3. 免费ssr账号
    免费ssr账号  @回复

    关注一下。。。。

  4. kevin
    kevin  @回复

    你好啊

  5. jack
    jack  @回复

    哈哈

  6. John
    John  @回复

    很高兴认识你

  7. John
    John  @回复

    bug?