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

本文介绍了在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);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值