JS知识拾遗--下拉到底部加载数据

最新推荐文章于 2024-07-16 17:26:59 发布

原创最新推荐文章于 2024-07-16 17:26:59 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

php 同时被 3 个专栏收录

92 篇文章

订阅专栏

55 篇文章

订阅专栏

thinkphp

24 篇文章

订阅专栏

本文介绍了在iframe中实现与父窗口交互的方法及通过监听滚动事件实现内容动态加载的技术细节。涉及jQuery操作、DOM访问及AJAX请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面的弹出层是iframe，在iframe中去给父级页面的元素赋值  会用到下面的知识点 
$("#video_name", window.parent.document).val($("#name").val());
$("#video_url", window.parent.document).val($("#val").val());

属性设置为scroll的元素。

$('.popup_tree_menu').on('scroll',function(){
    var top    = $(this).scrollTop(); //滚动条距离顶部的高度
    var height = $(this).height();//当前元素的高度
    var scrollHeight = $(this).get(0).scrollHeight;
    console.log(top)
    console.log(height)
    console.log(scrollHeight)
    if(scrollHeight <= top+height){
       alert(123)
    }
});

当页面滚动式不是一个小的元素

$(window).scroll(function () {
       var scrollTop = $(window).scrollTop();                                // 滚动条距离顶部的高度
       //scrollHeight,windowHeight,scrollHeight1三个height相同，都是这个页面的高度
        var scrollHeight = $(document).height();                           // 当前页面的总高度
        var windowHeight = $(window).height();          // 当前可视的页面高度，jquery获取的不是屏幕的高度，而是整个文档的高度
        var scrollHeight1 = $("#test").get(0).scrollHeight;

        var windowidth = $(window).width();
       var documentwidtht = $(document).width() ;

        var innerHeight = window.innerHeight; //window的高度，即手机的高度
        var clientHeight = document.body.clientHeight; //window的高度
        var clientHeight1 = document.documentElement.clientHeight;//这个是body的整个高度，chrom测试


        if(scrollTop + innerHeight >= scrollHeight){        // 距离顶部+当前高度 >=文档总高度，即代表滑动到底部
           loadMore();
        }
   });

function loadMore() {
    var type = $('#filetype').val();
    var page = $('#page').val();
    var next_page = Number(page)+1;
    var vars = 'type='+type+'&page='+next_page; 
    console.log(vars)
    $.ajax({
        type : "GET",
        url : "{:U('winpop')}",
        data : vars,
        dataType : "json",
        success : function(data) {
            console.log(data);
            inner_html(data,type);
        }
    });
}

php:

public function winpop() {
    $type = I('request.type');
    $page = isset($_GET['page']) ? I('get.page') : 1 ;
    $map['file_type']  = array('eq',$type);
    $menu  = M('material')
        -> field('id,url,title,cover')
        -> where($map)
        -> limit(($page-1)*20,$page*20)
        -> order('id desc')
        -> select();
    $data = array();
    $data['data']   = $menu ? $menu : '';
    $data['prefix'] = self::OSS_URL;
    $data['page']   = (Int) $page;
    $this->ajaxReturn($data);
}