jquery 点击加载更多

html部分

  <ul class="bill moreadd">
        <div class="total"><span>-</span><span>23756.177</span></div>
<li>
<div class="left">
<p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p>
</div>
<div class="right">签到成功</div></li><li>
<div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p>
</div>
<div class="right">签到成功</div></li><li><div class="left"><p class="type">0.01000</p><p class="time">2019-06-14 15:58:59</p></div><div class="right">签到成功</div>
        </li>
        <li>
<div class="left">
                <p class="type">0.01000</p>
                <p class="time">2019-06-14 15:58:59</p>
            </div>
            <div class="right">签到成功</div>
        </li>
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>

<span class=“more” data-total=“3” data-page=“1”>加载更多</span>
$('.more').on('click', function () {
            var baseurl = $('#baseurl').val();
            var type = $.trim($(this).attr('data-type'));
            var total = parseInt($(this).attr('data-total'));
            var page = parseInt($(this).attr('data-page'));
            $.ajax({
                url: './lib/js/more' + page + '.json',
                type: 'get',
                dataType: "json",
                data: { page: page + 1 },
                success: function (res) {
                    var result = '';
                    // console.log(res.lists)
                    var list = res.lists
                    $('.more').attr('data-page', page + 1);
                    for (var i = 1; i < list.length; i++) {
                        console.log(res.lists[i])
                        result += '<li>'
                            + '<div class="left">'
                            + '<p class="type">' + res.lists[i].price + '</p>'
                            + '<p class="time">' + res.lists[i].date + '</p>'
                            + '</div>'
                            + '<div class="right">' + res.lists[i].name + '</div>'
                            + '</li>'
                    }
                    $('.moreadd').append(result);
                <span class="hljs-keyword">if</span> (page + <span class="hljs-number">1</span> == total) {
                    $(<span class="hljs-string">'.more'</span>).remove();
                }
            }
        });
    });

注意

这里的more.json 是本地测试数据,所以传入页码是 more1.json more2.json 换成接口的话,按照正常来就可以了。

猜你喜欢

转载自www.cnblogs.com/mica/p/11162528.html