Typescript 如何仅在底部附近向下滚动时运行函数?
我使用的是0.1.4版 我的扑克牌是 右键滚动时,它只在开始时运行一次Typescript 如何仅在底部附近向下滚动时运行函数?,typescript,angular,Typescript,Angular,我使用的是0.1.4版 我的扑克牌是 右键滚动时,它只在开始时运行一次onScrollDown() 我试图将infiniteScrollDistance更改为2和0.8。但一切都失败了 只有在底部附近向下滚动时,才能运行onScrollDown() @Component({ selector: 'my-app', directives: [InfiniteScroll], styles: [` .search-results { height: 20rem;
onScrollDown()
我试图将infiniteScrollDistance
更改为2
和0.8
。但一切都失败了
只有在底部附近向下滚动时,才能运行onScrollDown()
@Component({
selector: 'my-app',
directives: [InfiniteScroll],
styles: [`
.search-results {
height: 20rem;
overflow: scroll;
}
`],
template: `
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="0.8"
[immediateCheck]="true"
(scrolled)="onScrollDown()">
<p *ngFor="let i of array">
{{i}}
</p>
</div>
`
})
export class App {
array = [];
sum = 20;
constructor() {
for (let i = 0; i < this.sum; ++i) {
this.array.push(i);
}
}
onScrollDown () {
console.log('near the bottom!!');
// add another 20 items
const start = this.sum;
this.sum += 20;
for (let i = start; i < this.sum; ++i) {
this.array.push(i);
}
}
}
@组件({
选择器:“我的应用程序”,
指令:[无限滚动],
风格:[`
.搜索结果{
高度:20雷姆;
溢出:滚动;
}
`],
模板:`
{{i}
`
})
导出类应用程序{
数组=[];
总和=20;
构造函数(){
for(设i=0;i
在某个地方尝试一个onScroll来捕获窗口滚动事件…类似这样的事件,然后抛出你的函数,该函数将执行你想在里面执行的任何操作
javascript
window.onscroll = function() {
console.log("scrolling");
};
jQuery
$(window).on('scroll', function() {
console.log("scrolling");
});
还有一些函数/方法将返回窗口或视口的顶部和底部(无论您需要哪个,如果是原始javascript、jQuery或其他框架)然后,在你希望你的函数开始工作的时候,你需要做一些数学上的事情。试着这样做:创建一个可观察对象,跟踪鼠标的移动,只触发,但只有当鼠标靠近底部时才发出值。例如:
const mouseMove$ = Observable.fromEvent(document, 'mousemove')
.filter(event => event.clientY > SOME_VALUE);
需要根据文档高度计算某些_值
然后创建跟踪滚动事件的第二个可观察对象:
const scroll$ = Observable.fromEvent(document, "scroll");
然后将两者结合起来:创建一个仅在鼠标在页面底部移动且用户滚动时才发出值的可观察对象:
const combined$ = Observable.combineLatest(
mouseMove$, scroll$
);
然后订阅:
combined$.subscribe(
combined => {
console.log("this the mouse event", combined[0]);
console.log("this the scroll event", combined[1]);
// user is scrolling at the bottom of the page, add action here
}
);
对于我的问题,我需要更改
高度:20rem代码>至<代码>高度:100%代码>,然后它就工作了
另外,@orizens在我问过他之后,在angular2无限卷轴的文件中添加了一个
如果不想使用角度2无限滚动,
@Angular大学使用RxJS提供了一个很好的方向。请检查他的答案。为什么在初始页面加载时运行onScrollDown()。@AngJobs抱歉,这是因为[immediateCheck]
,我删除了它。现在,onScrollDown()
将不会在初始页面加载时运行。谢谢,但需要改进的是,使用Mac touchpad滚动时不会触发“mousemove”事件。