angular4中判断滚动条是否到达底部

时间:2024-03-15 21:03:08

展示结果:

    angular4中判断滚动条是否到达底部

当滚动条接近于底部的时候在控制台输出文字。

一、首先通过命令新建一个项目

 ng new test01

ng 是angular-cli命令 ;new 是新建 ;test01 是项目名称,项目名称可以随意,不过尽量按照规范来。


二、然后创建三个组件:home组件、list组件、item组件

ng g c home

ng g c list

ng g c item

g 代表的是generate,生成;

c 代表的是component, 组件

home、list、item是生成的组件名称。


三、将新创建的组件使用起来,使用方法如下:

angular4中判断滚动条是否到达底部

angular4中判断滚动条是否到达底部

angular4中判断滚动条是否到达底部

angular4中判断滚动条是否到达底部

四、编写数据

angular4中判断滚动条是否到达底部

在list组件中,定义了一个lists变量,将里面的内容作为数据,传递给item。那是通过什么传递这个数据呢?

angular4中判断滚动条是否到达底部

在list的html页面中,我们看到了这个 [item]="list" ,这是angular中的父元素传值到子元素,通过[子元素]="父元素"的方式。*ngFor是将lists这个数组,循环遍历了一下,list就是数组中的每个对象。然后,我们在item中接收一下list传递过来的值:

angular4中判断滚动条是否到达底部

现在,我们就有一个item的变量,变量的值是lists数组中的每一个对象了。

angular4中判断滚动条是否到达底部

在item的html页面中用插值表达式{{...}}的方式展示出来。

五、编写逻辑部分:

首先,因为是滚动条,所以我们要想办法获得scroll事件。我这里是通过RXjs来获得的:

    angular4中判断滚动条是否到达底部

图中红色圈中的部分就是实现本次效果的代码了。

如果有问题,欢迎给我留言。