外贸网站建设,外贸网站建设公司,跨境电商独立站

首先第一步：后台开启API功能

第二步：HTML代码结构，和点击按钮

  <div class="item_box" id="view_article">    
                  {hmcms:list num=6 order='sorting asc,id desc'}
                <a href="[list:link]" class="item">
                    <div class="img_box">
                        <div class="pb">
                            <div class="ab"><img src="[list:ico]" alt="[list:title]" title="[list:title]"></div>
                        </div>
                    </div>
                    <div class="word">
                        <div class="time">[list:date style=Y.m.d]</div>
                        <div class="t1 font24 hx titlesFc">
                            <p>[list:title]</p>
                        </div>
                        <div class="t2 font16">
                              <p>[list:content drophtml=1 lencn=100]</p>
                        </div>
                    </div>
                </a>
                {/hmcms:list}  
            </div>
         
                 <div class="ins_more s_more d-none" id="more_btn"><div class="more"><span id="more_text">查看更多</span><i class="iconfont icon-xiajiantou3"></i></div></div>

第三步：写JS.

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    // 1. 初始化参数
    var Page = 2; 
    var Num  = 6; // 每页加载3条
    var scode = '{sort:scode}'; // 动态获取当前栏目ID
    var Dom  = $('#view_article'); // 挂载容器
    var isEnd = false; // 加一个锁，防止没有内容了用户还在不停点击发起多余请求

    // 2. 绑定“查看更多”点击事件
    $('#more_btn').on('click', function() {
        // 如果已经判定没有更多内容了，直接拦截点击，不再执行 Ajax
        if (isEnd) return false;

        var url = '/api.php/list/' + scode + '/page/' + Page + '/num/' + Num;
        
        // 改变状态为加载中，同样保持样式不变
        $('#more_text').text('加载中...');
        
        // 发起 Ajax POST 请求
        $.ajax({
            type: 'POST', 
            url: url,
            dataType: 'json',
            data: {
                appid: '{pboot:appid}',
                timestamp: '{pboot:timestamp}',
                signature: '{pboot:signature}',
            },
            success: function(response) {
                // PbootCMS 返回 1 代表有正常响应
                if (response.code == 1) {
                    var Data = response.data;
                    // 把接口返回的数据整体打印出来
                   //    console.log('--- 栏目接口返回的数据列表 ---', Data);
                    if (Data && Data.length > 0) {
                        // 循环解析返回的数据对象
                        $.each(Data, function(index, value) {
                            var dateStr = value.date ? value.date.split(' ')[0].replace(/-/g, '.') : ''; 
                            var description = value.content || '';
                            description = description.replace(/<[^>]+>/g, ""); 
                            if (description.length > 100) {
                                description = description.substring(0, 100) + '...';
                            }

                            var Html = '<a href="' + value.contentlink + '" class="item">' +
                                       '    <div class="img_box">' +
                                       '        <div class="pb">' +
                                       '            <div class="ab"><img src="' + value.ico + '" alt="' + value.title + '" title="' + value.title + '"></div>' +
                                       '        </div>' +
                                       '    </div>' +
                                       '    <div class="word">' +
                                       '        <div class="time">' + dateStr + '</div>' +
                                       '        <div class="t1 font24 hx titlesFc">' +
                                       '            <p>' + value.title + '</p>' +
                                       '        </div>' +
                                       '        <div class="t2 font16">' +
                                       '            <p>' + description + '</p>' +
                                       '        </div>' +
                                       '    </div>' +
                                       '</a>';
                            
                            Dom.append(Html);
                        });

                        // 恢复“查看更多”文字
                        $('#more_text').text('查看更多');
                        Page += 1;
                        
                        // 如果当前返回的数据量小于规定的单页总数，说明下一页绝对空了
                        if (Data.length < Num) {
                            isEnd = true;
                            $('#more_text').text('没有更多内容了');
                            $('#more_btn').find('.iconfont').hide(); // 优雅地把下箭头隐藏掉
                        }
                    } else {
                        // 数组为空，说明没有更多内容了
                        isEnd = true;
                        $('#more_text').text('没有更多内容了');
                        $('#more_btn').find('.iconfont').hide(); 
                    }
                } else {
                    // code 为 0，通常代表无更多数据
                    isEnd = true;
                    $('#more_text').text('没有更多内容了');
                    $('#more_btn').find('.iconfont').hide();
                }
            },
            error: function(xhr, status, error) {
                console.error('API通信异常:', error);
                $('#more_text').text('查看更多'); // 报错时恢复文字
            }
        });
    });
});
</script>