angular2 Swiper3 上拉刷新,下拉加载

小白 · 发表于 2016-8-15 16:21:52

本帖最后由小白于 2016-8-15 16:24 编辑

angular2 还没发布正式版, 网上也有其他的瀑布流插件,觉的不怎么好用,以前我也写过一个ng1的swiper插件, 所以又重新写了一个给大家借鉴一下下面是组件
swiper-scroll.ts

import {Injectable, Inject, Component, ElementRef, Host, Input, EventEmitter, Output} from '@angular/core';
import { AppState } from '../service/app.service'; //数据服务
import { UnitConfig } from '../service/unit.config';//其他配置方法
const Swiper = require('swiper');
@Injectable()
@Component({
selector: '[swiper-scroll]',
template:
`<div class="swiper-container" [ngStyle]="{'height': wheight}">
<div class="swiper-wrapper">
<h class="up-slide">下拉刷新</h>
<ng-content></ng-content>
<h class="down-slide">上拉加载</h>
</div>
</div>`,
styles: [require('./swiper-scroll.css')]
})
export class SwiperScroll {
@Input() options: any;//参数
swiper: any;
unitconfig: any;
@Input() pager: any;
showPager: boolean;
wheight = "540px";
@Output() scrollUp: EventEmitter<any> = new EventEmitter();
@Output() scrollDown: EventEmitter<any> = new EventEmitter();
constructor(public appState: AppState, @Inject(ElementRef) private elementRef: ElementRef) {
this.unitconfig = new UnitConfig();
}
ngAfterViewInit() {
// 判断内容区高度
this.wheight = (window.innerHeight - this.elementRef.nativeElement.parentNode.parentNode.childNodes[1].scrollHeight - this.appState.state.bottom_height) + "px";
}
ngOnInit() {
let $this = this;
let options = this.unitconfig.defaults({
direction: 'vertical',
slidesPerView: "auto",
onTouchMove: function (swiper) {
},
onTouchEnd: function (swiper) {
let translate = -swiper.translate;
if (translate < -100) {
$this.loadUpSlides();
}
if (translate - (swiper.virtualSize - swiper.height) > 100) {
$this.loadDownSlides();
}
}
}, this.options);
const nativeElement = this.elementRef.nativeElement;
setTimeout(() => {
this.swiper = new Swiper(nativeElement.children[0], options);
});
}
public loadUpSlides() {
setTimeout(() => {
this.scrollUp.emit("event");
});
}
public loadDownSlides() {
setTimeout(() => {
this.scrollDown.emit("event");
})
}
public update() {
setTimeout(() => {
this.swiper.update();
});
}
}
@Injectable()
@Component({
selector: '[swiper-slide]',
template: '<ng-content></ng-content>'
})
export class SwiperSlide {
private ele: HTMLElement;
constructor(
@Inject(ElementRef) elementRef: ElementRef,
@Host() @Inject(SwiperScroll) swiper: SwiperScroll
) {
this.ele = elementRef.nativeElement;
this.ele.classList.add('swiper-slide');
swiper.update();
}
}

复制代码

引用组件

import { Component,OnInit,AfterViewInit,ViewChild,Injectable, Inject, ElementRef, Host, Input } from '@angular/core';
import { AppState } from '../service/app.service';
import { DataService } from '../service/data.service';
import { UnitConfig } from '../service/unit.config';
import { SwiperScroll, SwiperSlide} from '../directive/swiper-scroll';
@Component({
selector: 'invest',
pipes: [ ],
providers: [DataService ],
styles: [ require('./invest.component.css') ],
template: require('./invest.component.html'),
directives: [RouterActive,RingContainer ,SwiperScroll, SwiperSlide]
})
export class InvestComponent implements AfterViewInit,OnInit {
@ViewChild(SwiperScroll) swiperccroll: SwiperScroll;
public arraylist:any=[];
private UnitConfig :any;
public start = true;
public ngOnInit()
{
this.binData();
//console.log('Initial App State', this.appState.state);
}
private binData()
{
let url = 'http://localhost:3000/plugs/home.json';
this.dataService.getDataGet(url,false).then(data=>this.view(data));
}
public view(data)
{
this.start = true;
}
/**
* 完成viewChild初始前后执行
*/
constructor(public appState: AppState,public dataService:DataService, @Inject(ElementRef) private elementRef: ElementRef) {
this.UnitConfig = new UnitConfig();
}
/**
* 完成viewChild初始化后执行
*/
public ngAfterViewInit() {
//console.log(this.swiperContainer);
}
//下拉加载
public onScrollDown () {
if(this.start)
{
this.start = false;
this.binData();
}
}
// 上拉刷新
public onScrollUp () {
}
}

复制代码

页面

<ul class="invest_content" swiper-scroll (scrollDown)="onScrollDown($event)" >
<li swiper-slide >
</li>
</ul>

复制代码