zoukankan      html  css  js  c++  java
  • 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 换成接口的话,按照正常来就可以了。

  • 相关阅读:
    经典SQL例题
    truncate,delete,drop的异同点
    scp 在不同主机之间数据传输
    自定义标签库
    servlet 学习
    HTTP协议 学习
    Tomcat服务器的数字证书 HTTPS 连接!
    JSP开发 路径问题汇总
    java 文件上传 下载 总结
    myeclipse 出现换行符和空格符 解决方案 换行出现乱码
  • 原文地址:https://www.cnblogs.com/mica/p/11162528.html
Copyright © 2011-2022 走看看