• 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);
            }
        });
  • 相关阅读:
    Linux文本检索命令grep笔记
    Linux文本检索命令grep笔记
    Linux文件查询笔记
    Linux文件查询笔记
    Linux文件默认权限和umask笔记
    Linux文件默认权限和umask笔记
    Linux关于文件的权限笔记
    Linux关于文件的权限笔记
    Linux文件操作实用笔记
    6.创建自定义菜单
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/13992673.html
Copyright © 2020-2023  润新知