1. 首页
  2. 新闻资讯
  3.  
  4. 建站经验
  5.  

TP5无刷新点击加载更多

发布时间:2021-07-28 12:24:11 来源:
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
37
38
39
40
41
42
43
44
45
<div class="famous qc-default">
            <div class="qc-g">
                <div class="qc-title clear">
                    <h3>文章列表</h3>
                </div>
                <div class="list">
                    <ul>
                     {volist name="list" id="vo" }
                        <li><a href="/news-detail-{$vo['id']}.html">
                            <div class="pic">
                                <img src="{$vo['photo']}" alt="">
                            </div>
                            <div class="txt">
                                <h3>{$vo['name']}</h3>
                                <p>{$vo['summary']}</p>
                            </div></a>
                        </li>
                       {/volist}
                    </ul>
                </div>
            </div>
        </div>
      <a href="javascript:void(0);" class="click-more">点击加载更多</a>


<script>
    var yema=2;
    $('.click-more').click(function () {
        var page={$page};
        var $btn = $(this);
        $btn.html('loading');
        if(page<yema){
            $btn.html('没有更多了');
        }
        else{
            
            $.ajax({
                type: "post",
                url: "/introduce-get_list.html",
                data: {p:yema},
                success:function(json){
                    if(json.status==1){
                        yema++; 
                        setTimeout(function(){
                            $btn.html('点击加载更多');
                            
                            var data="";
                            for(i=0;i<json.content.length;i++){
                            data+=`
                            <li>
                                <a href="/news-detail-${json.content[i].id}.html">
                                <div class="pic">
                                <img src="${json.content[i].photo}" alt="">
                                </div>
                                <div class="txt">
                                    <h3>${json.content[i].name}</h3>
                                    <p>${json.content[i].summary}</p>
                                </div>
                                </a>
                            </li>
                            `;
                            }
                            $('.list>ul').append(data);
                           
                            //yema++;
                        }, 1000);
                    }
                    
 
                },error:function(jqXHR, textStatus, errorThrown){
                    alert(textStatus);
                },
            })
        }
 
    });
</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
42
43
44
45
public function introduce_list($p='1')
{
$where['column']=['eq','34'];
$where['status']=['eq','1'];
$where['enable']=['eq','1'];
$page_num='6';
$list=Db::name('table')->where($where)->order('sort desc ,id  desc')->page($p,$page_num)->select();
return json(array('status'=>'1','message'=>'成功','content'=>$list));
 
}

 

新闻资讯

 

服务项目

 

联系我们

  • 咨询电话:13316437003
  • 地址:广东省深圳市福田区八卦四路中浩大厦2楼216
  • 业务咨询:点击这里给我发消息
  • 技术服务:点击这里给我发消息
  • 售后邮箱:service@dcnop.com
  • 技术邮箱:zcl@dcnop.com

 

微信公众号

  • 客服:点击这里给客服发消息

    技术:点击这里给技术发消息

    大诚网络--深圳网站制作|深圳网站优化|深圳网站运营

    客户服务热线

    0755-82400810

    在线客服