您的位置:首页 > Web前端 > > 正文

html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)

更多 时间:2021-10-08 00:21:41 类别:Web前端 浏览量:2123

html5页面强制刷新

移动端html5判断是否滚动到底部并且下拉加载

如何判断滚动是否滚动到了底部?

首先要了解的知识 scrollHeight,clientHeight,scrollTop

scrollHeight

只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。


html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)

clientHeight

也是只读属性,没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度,包含内边距,不包括x轴的滚动条高度、边框、外边距;

同一种型号的手机上是不变的。

html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)

scrollTop

这个元素的顶部滚动距离(到视口(一般都是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)];
                    //页数加一
                    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 = `
                            <li class="mui-card">
                                <li class="mui-card-header mui-card-media">
                                    <img src="${item.header}">
                                    <li class="mui-media-body">
                                        ${item.name}
                                        <p>发表于 ${item.passtime}</p>
                                    </li>
                                    
                                </li>
                                <li class="mui-card-content">
                                    <li class="mui-card-content-inner">
                                        <p>${item.text}</p>
                                    </li>
                                </li>
                                <li class="mui-card-footer">
                                    <a class="mui-card-link">喜欢</a>
                                    <a class="mui-card-link">评论</a>
                                </li>
                            </li>
                        `
                        $('.content:eq(0)').append(html).css('backgroundImage',"none")
                        loadingState.text = false;
                        $('.loading.text').stop(true).slideUp(2000,function(){
                            $('.loading.text').remove()
                        })
                    })
                })
            }
    }
    
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。