前言
这段代码是2016年自学angular2的时候写的,现在应该已经有更好的解决办法或是其他依赖可以使用
代码
import { Component, OnInit, HostListener } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import 'rxjs/add/operator/toPromise';
import { Item } from './item';
import { ItemService } from '../services/item.service';
@Component({
selector:'index',
templateUrl:'javascripts/index/index.component.html',
styleUrls:['javascripts/index/index.component.css']
})
export class IndexComponent implements OnInit{
constructor(private route: ActivatedRoute, private itemSearch: ItemService, private router: Router){}
category:string;
keyWord:string;
oldKeyWord:string;
oldCategory:string;
items:Item[]=[];
page:number=1;
pageEnd:boolean=false;
pageSts:string="paged"
/*bundScroll(reset):void{
var $ = window['$'];
$(window).off('scroll');
$(window).on('scroll', this.contentScroll);
if(reset==1){
$('body').scrollTop(0);
}
}
contentScroll():void{
var $ = window['$'];
var wheight = document.body.scrollHeight,//网页高度
scrollTop = $('body').scrollTop(),//滚动高度
vheight = document.body.offsetHeight;
if(wheight - vheight - scrollTop < 100){
$(window).off('scroll');
// console.log('wheight:'+wheight, vheight, 'scrollTop:'+scrollTop);
$('.footer').click();
}
}*/
ngOnInit():void{
var $ = window['$'];
// this.bundScroll(1);
this.route.params.forEach((params: Params) => {
this.category = params['category'];
this.keyWord = params['keyword'];
});
if(!this.keyWord&&!this.category)
this.category = 'all';
//this.doPage();
}
ngDoCheck() {
var changed = false;
if (this.category !== this.oldCategory) {
changed = true;
this.itemSearch.searchByCategory(this.category,this.page).then(items=>this.items = items);
this.oldCategory = this.category;
this.keyWord == null;
this.oldKeyWord = null;
}
if(this.keyWord != this.oldKeyWord){
changed=true;
this.itemSearch.searchByKeyWord(this.keyWord,this.category,this.page).then(items=>this.items = items);
this.oldKeyWord = this.keyWord;
}
if(changed){
this.pageEnd = false;
this.page = 1;
//this.bundScroll(0);
}
}
@HostListener('window:scroll')
apage(){
if(this.pageSts == 'paged'){
var wheight = document.body.scrollHeight,//网页高度
scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,//滚动高度
vheight = document.body.offsetHeight;
if(wheight - vheight - scrollTop < 100){
this.pageSts = 'paging';
this.doPage();
}
}
}
doPage(){
if(!this.pageEnd){
this.page++;
if(this.keyWord){
this.itemSearch.searchByKeyWord(this.keyWord,this.category,this.page)
.then(items=>{
this.pageEnd = items.length == 0;
if(this.page%10 == 1){
this.items=items;
}else{
this.items=this.items.concat(items)
}
this.pageSts='paged'
})
//.then(()=>this.bundScroll(this.page%10));
}else{
this.itemSearch.searchByCategory(this.category, this.page)
.then(items=>{
this.pageEnd = items.length == 0;
if(this.page%10 == 1){
this.items=items;
}else{
this.items=this.items.concat(items)
}
this.pageSts='paged'
})
//.then(()=>this.bundScroll(this.page%10));
}
}
}
}