H5加JS实现下拉加载更多

JS原生实现下拉刷新加载

今天我们来简单实现一个下拉加载的小功能。很多购物网站比如某宝，每日优鲜都是类似的功能，我们先来看一下简单的效果

这是我在百度找到的一个简单的效果图,图片一共实现了连个功能，上拉刷新和下拉加载更多，我们今天只实现下面的功能就可以了 首先,要先进行排版,让页面出现滚动条,页面内容只有大于浏览器高度的时候才会出现滚动条，我们先来进行一个简单的排版

我是头部

我是脚步

这是一个基本的排版,由于没有数据，所以我自己循环创建了100条数据,然后简单的写了一些样式

*{

margin:;

padding:;

}

li{

list-style:none;

border-bottom:.01rem solid#ccc;

line-height:4;

text-align:center;

}

html,body,.wrap{

width:100%;

height:100%;

background:pink;

font-size:.14rem;

}

.wrap{

display:flex;

flex-direction:column;

}

header,footer{

text-align:center;

padding:.1rem;

}

main{

flex:1;

overflow-y:scroll;

background:skyblue;

}

我们先来看一下创建的数据和页面最开始的样子 数据和页面结构都没有问题

页面上还没有滚动条 我们先来添加一部分数据的内容

letstr='';

letjsonN = json.slice(,30);

for(leti=;i

str+='

'+jsonN[i]+'

'

};

document.getElementsByTagName('ul')[].innerHTML=str;

我在页面上添加了30条数据，现在已经产生了滚动条，我们来看一下页面

注意：在写css样式的时候，想让哪个元素溢出出现滚动条，就需要给哪个元素添加overflow-y: scroll，否则后期写JS代码的时候极有可能因为找不到滚动条是哪个元素产生的发生错误

我今天是想让main元素产生滚动条，所以我在main的css样式中加上了overflow-y:scroll; 先判断一下滚动条事件有没有产生

letmain = document.getElementsByTagName('main')[];

main.onscroll=function() {

console.log('滚动条')

}

返回到浏览器看一眼,页面中打印出了滚动条三个字，证明我们的滚动条事件已经触发了 接下来我们就要开始判断条件了,在什么情况下加载数据了 我们平时在逛购物网站的时候会发现,当我们的滚动条快拉到底部的时候就又会加载一批数据，好像总也加载不完,可是这个条件到底该如何判断呢？ JS原生有一个属性可以读出一个元素的内容高度

Element.scrollHeight

内容高度：就是这个元素里面所有内容的高度,包括被滚动条隐藏的部分，也包括padding，但是不包括border和margin,如果一个元素没有滚动条那么它的scrollHeight值就和clientHeight值相同

JS原生中还有一个属性

Element.scrollTop

可以读出这个元素的顶部到它的最顶部可见内容的距离,就是你可以看到的部分到最顶部的距离，如果没有滚动条，值为0,换句话说就是滚动条划上去的部分

今天我们来利用这两个属性来完成条件的判断,先分别打印一下他们的值

main.onscroll=function() {

letscrollH = main.scrollHeight;

letscrollT = main.scrollTop;

console.log('我是内容的高度',scrollH);

console.log('我是滚动条划上去的高度',scrollT);

}

当滚动条在页面的最顶部的时候,打印出来的scrollT值为0,当滚动条拉到最底部的时候，打印出来的值为991, 而scrollH的值则一直都是1650,就是内容始终没有变过 通过图片我们可以发现,滚动条越往下scrollT的值就越大,我们可以根据scrollT和scrollH的比例来进行滚动条位置的判断 因为scrollH是main盒子内容的高度,scrollT是滚动条滑过的高度,所以scrollH的值会永远比scrollT的值要大，实际上scrollT/scrollH的值就是页面的内容与滚动下拉距离的比例,我们来看一下具体的代码

main.onscroll=function() {

letscrollH = main.scrollHeight;

letscrollT = main.scrollTop;

if(scrollT / scrollH >0.6) {

console.log('可以开始加载数据了')

}

}

当滚动条下拉到百分之60的时候,控制台打印数据 这次,当滚动条快拉到底部的时候才开始打印数据,我们需要的就是这样的控制条件 现在，控制条件已经满足了，剩下的代码就好写很多了 我们先把向页面添加内容的部分封装成一个函数

functionadd(num) {

letjsonN = json.slice(,num *30);

letstr ='';

for(leti =;i

str +='

'+ jsonN[i] +'

'

};

document.getElementsByTagName('ul')[].innerHTML = str;

}

这个num是全局的一个变量,当触发条件的时候,num的值++,然后渲染到页面上的数据就会随着滚动条的下拉而加载更多，直到没有数据 我们来看一下整体的代码

letjson = [];

for(leti =;i

json.push('我是商品列表'+ i);

};

letnum =1;

letul = document.getElementsByTagName('ul')[];

letmain = document.getElementsByTagName('main')[];

functionadd(num) {

letjsonN = json.slice(,num *30);

letstr ='';

for(leti =;i

str +='

'+

jsonN[i] +'

'

};

document.getElementsByTagName('ul')[].innerHTML = str;

}

add(num);

main.onscroll=function() {

letscrollH = main.scrollHeight;

letscrollT = main.scrollTop;

if(scrollT / scrollH >0.6) {

num++;

add(num);

}

};

整体的逻辑也就是这样了,最开始要先调用一下这个函数，我们不能让页面是空白的呈现在用户的面前