挪动端html5分辨是不是翻转究竟部而且往下拉载入

2021-02-22 14:53 jianzhan

怎样分辨翻转是不是翻转到了底部?

最先要掌握的专业知识 scrollHeight,clientHeight,scrollTop

scrollHeight

写保护特性,高宽比包含全部內容,包括内边距,但不把水平翻转条、边框和外边距算在内。


clientHeight

也是写保护特性,沒有界定CSS或内联合理布局盒子的元素为0,它是元素內部的高宽比,包括内边距,不包含x轴的翻转条高宽比、边框、外边距;

同1种型号规格的手机上上是不会改变的。

scrollTop

这个元素的顶部翻转间距(到视口(1般全是html)的顶部的间距)。

能够完成测算究竟部的间距了

测算是不是抵达底部原生态js

element.scrollHeight - element.scrollTop === element.clientHeight

jquery

element..scrollHeight - element.scrollTop() == element.height()

完成往下拉更新

用到的是html+jq

var loadingState = {
        text:false,
        image:false,
        video:false
    }
    
var httpUrl2 = "https://api.apiopen.top/getJoke"
    var options1 = {
        page:1,
        count:10,
        type:"text"
    }
    var options2 = {
        page:1,
        count:10,
        type:"image"
    }
    var options3 = {
        page:1,
        count:10,
        type:"video"
    }
    
    //在window里获得不到options,就只能把options放在data目标里,就可以用data['options'+(index+1)]获得到了
    var data = {
        options1,options2,options3
    }

//恳求句子所属
    loadingState.text = true;
    textRender(options1);

//监视要拖动器皿的翻转恶性事件
$('.content').scroll(function(e){
    var index = $(this).index();
    //获得翻转的间距
        var sTop =  $('.content').eq(index).scrollTop();
    //获得器皿的高宽比
        var contentHeight = $('.content').eq(index).height();
    //获得翻转高宽比
        var scrollHeight = $('.content').eq(index)[0].scrollHeight;
       //依据所选的不一样options载入不一样的內容
        if(index==$(this).index()&&loadingState.text!=true)         {
         //分辨是不是早已翻转底
            if((sTop+contentHeight)==scrollHeight){
                //当抵达底部是载入选项为true,以后的实际操作
                loadingState.text = true;
                //內容迟缓淡出
                $(this).animate({
                    scrollTop:sTop+80
                },1000)
                var options = data['options'+(index+1)];
                //页数加1
                options.page += 1;
                //载入新获得的內容
                textRender(options);
            }
        }           
}

//载入完成涵数
funtion textRender(obj){
    //要加上的內容
    if(obj == options1){
            console.log(obj);
            $.get(httpUrl2,obj).then(function(res){            
                res.result.forEach(function(item,i){
                    var html = `
                        <div class="mui-card">
                            <div class="mui-card-header mui-card-media">
                                <img src="${item.header}">
                                <div class="mui-media-body">
                                    ${item.name}
                                    <p>发布于 ${item.passtime}</p>
                                </div>
                                
                            </div>
                            <div class="mui-card-content">
                                <div class="mui-card-content-inner">
                                    <p>${item.text}</p>
                                </div>
                            </div>
                            <div class="mui-card-footer">
                                <a class="mui-card-link">喜爱</a>
                                <a class="mui-card-link">评价</a>
                            </div>
                        </div>
                    `
                    $('.content:eq(0)').append(html).css('backgroundImage',"none")
                    loadingState.text = false;
                    $('.loading.text').stop(true).slideUp(2000,function(){
                        $('.loading.text').remove()
                    })
                })
            })
        }
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。