zoukankan      html  css  js  c++  java
  • jq监听滚动条滚动,上拉加载下一页内容

     具体代码:

     var loadMore = function () {
            let resList = [];
            for (let i = 0; i < item; i++) {
                resList.push(dataList[i]);
                if(item > data_length){
                    $('.bottom_content').html("——沒有更多了——");
                } else{
                    $('.bottom_content').html("——上拉加载更多——");
                }
            }
            $('.query_list').html(resList);
        }


    $(document).ready(function() {
            $("#sectors").prepend("<option value='选择界别' selected='selected'>选择界别</option>");
            let data = {};
            loadMore();
            // 截取姓氏
            $('.book_item').each(function () {
                $(this).find('.surnames').text($(this).find('.book_name span').eq(0).text()[0])
            });
            let picker = document.getElementById('sectors');
            picker.onchange = function () {
                $('.picker').removeClass('active');
                $('.list_item').removeClass('mui-active');
                $('.list_item').text(picker.value);
                $('.select_id').text($("#sectors option:selected").attr("id"));
                console.log('id', $("#sectors option:selected").attr("id"));
                data.subsector_id = $('.select_id').text();
                $("#name_query").val('');
                getList();
            }
            var getList = function () {
                const url = '/home/index/book';
                $.ajax({
                    url: url,
                    type: "get",
                    dataType: "text",
                    data: data,
                    async: false,
                    success: function (re) {
                        console.log('查询结果',$(re).find("li").length);
                        $(window).scroll(function(){
                            //当时滚动条离底部60px时开始加载下一页的内容
                            if (($(window).height() + $(window).scrollTop()) >= $(document).height()) {
                                $('.bottom_content').html("——沒有更多了——");
                            }
                        })
                        $('.query_list').html($(re).find("ul").html());
                        $('.book_item').each(function () {
                            $(this).find('.surnames').text($(this).find('.book_name span').eq(0).text()[0])
                        });
                    },
                    error: function () {
                        console.log('请求失败')
                    },
                    beforeSend: function (request) {
                        // layer.msg('正在加载数据请稍后。。。');
                        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                    }
                });
            }
        });
        $(window).scroll(function(){
            //当时滚动条离底部60px时开始加载下一页的内容
            if (($(window).height() + $(window).scrollTop()) >= $(document).height()) {
                clearTimeout(timers);
                //这里还可以用 [ 延时执行 ] 来控制是否加载 (这样就解决了 当上页的条件满足时,一下子加载多次的问题啦)
                timers = setTimeout(function () {
                    item += 10;
                    if(! $('.select_id').text()){
                        loadMore(); //调用执行上面的加载方法
                    }
                }, 300);
            }
        });
  • 相关阅读:
    【刷题】HDU 6183 Color it
    【刷题】HDU 3435 A new Graph Game
    【刷题】HDU 1853 Cyclic Tour
    【刷题】BZOJ 5418 [Noi2018]屠龙勇士
    【刷题】BZOJ 5415 [Noi2018]归程
    【刷题】BZOJ 4636 蒟蒻的数列
    【刷题】BZOJ 4443 [Scoi2015]小凸玩矩阵
    vue_过滤器: 对要显示的数据进行特定格式化后再显示
    vue_过渡_动画
    vue_实例_组件的生命周期
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/13992673.html
Copyright © 2011-2022 走看看