Swiper中文论坛

标题: angular2 Swiper3 上拉刷新,下拉加载 [打印本页]
作者: 小白    时间: 2016-8-15 16:21
标题: angular2 Swiper3 上拉刷新,下拉加载
本帖最后由 小白 于 2016-8-15 16:24 编辑

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

  2. import {Injectable, Inject, Component, ElementRef, Host, Input, EventEmitter, Output} from '@angular/core';
  3. import { AppState } from '../service/app.service'; //数据服务
  4. import { UnitConfig } from '../service/unit.config';//其他配置方法
  5. const Swiper = require('swiper');
  6. @Injectable()
  7. @Component({
  8.   selector: '[swiper-scroll]',
  9.   template:
  10.   `<div class="swiper-container" [ngStyle]="{'height': wheight}">
  11.     <div class="swiper-wrapper">
  12.       <h class="up-slide">下拉刷新</h>
  13.       <ng-content></ng-content>
  14.           <h class="down-slide">上拉加载</h>
  15.     </div>
  16.      </div>`,
  17.   styles: [require('./swiper-scroll.css')]

  19. })
  20. export class SwiperScroll {
  21.   @Input() options: any;//参数
  22.   swiper: any;
  23.   unitconfig: any;
  24.   @Input() pager: any;
  25.   showPager: boolean;
  26.   wheight = "540px";
  27.   @Output() scrollUp: EventEmitter<any> = new EventEmitter();
  28.   @Output() scrollDown: EventEmitter<any> = new EventEmitter();
  29.   constructor(public appState: AppState, @Inject(ElementRef) private elementRef: ElementRef) {
  30.     this.unitconfig = new UnitConfig();
  31.   }
  32.   ngAfterViewInit() {
  33.     // 判断内容区高度
  34.     this.wheight = (window.innerHeight - this.elementRef.nativeElement.parentNode.parentNode.childNodes[1].scrollHeight - this.appState.state.bottom_height) + "px";
  35.   }
  36.   ngOnInit() {
  37.     let $this = this;
  38.     let options = this.unitconfig.defaults({
  39.       direction: 'vertical',
  40.       slidesPerView: "auto",
  41.       onTouchMove: function (swiper) {
  42.       },
  43.       onTouchEnd: function (swiper) {
  44.         let translate = -swiper.translate;
  45.         if (translate < -100) {
  46.           $this.loadUpSlides();
  47.         }
  48.         if (translate - (swiper.virtualSize - swiper.height) > 100) {
  49.           $this.loadDownSlides();
  50.         }
  51.       }

  53.     }, this.options);

  55.     const nativeElement = this.elementRef.nativeElement;
  56.     setTimeout(() => {
  57.       this.swiper = new Swiper(nativeElement.children[0], options);
  58.     });
  59.   }

  61.   public loadUpSlides() {
  62.     setTimeout(() => {
  63.       this.scrollUp.emit("event");
  64.     });
  65.   }
  66.   public loadDownSlides() {
  67.     setTimeout(() => {
  68.       this.scrollDown.emit("event");
  69.     })
  70.   }
  71.   public update() {
  72.     setTimeout(() => {
  73.       this.swiper.update();
  74.     });
  75.   }

  77. }

  79. @Injectable()
  80. @Component({
  81.   selector: '[swiper-slide]',
  82.   template: '<ng-content></ng-content>'
  83. })
  84. export class SwiperSlide {
  85.   private ele: HTMLElement;
  86.   constructor(
  87.     @Inject(ElementRef) elementRef: ElementRef,
  88.     @Host() @Inject(SwiperScroll) swiper: SwiperScroll
  89.   ) {
  90.     this.ele = elementRef.nativeElement;
  91.     this.ele.classList.add('swiper-slide');
  92.     swiper.update();
  93.   }
  94. }
复制代码



引用组件
  1. import { Component,OnInit,AfterViewInit,ViewChild,Injectable, Inject, ElementRef, Host, Input } from '@angular/core';
  2. import { AppState } from '../service/app.service';
  3. import { DataService } from '../service/data.service';
  4. import { UnitConfig } from '../service/unit.config';
  5. import { SwiperScroll, SwiperSlide} from '../directive/swiper-scroll';
  6. @Component({
  7.   selector: 'invest',  
  8.   pipes: [ ],
  9.   providers: [DataService ],
  10.   styles: [ require('./invest.component.css') ],
  11.   template: require('./invest.component.html'),
  12.   directives: [RouterActive,RingContainer ,SwiperScroll, SwiperSlide]
  13. })
  14. export class InvestComponent implements AfterViewInit,OnInit {   
  15.     @ViewChild(SwiperScroll) swiperccroll: SwiperScroll;
  16.     public arraylist:any=[];
  17.     private UnitConfig :any;
  18.     public start = true;

  20.   public ngOnInit()
  21.   {
  22.       this.binData();
  23.         //console.log('Initial App State', this.appState.state);
  24.   }

  26.   private binData()
  27.   {
  28.     let url = 'http://localhost:3000/plugs/home.json';
  29.     this.dataService.getDataGet(url,false).then(data=>this.view(data));
  30.   }
  31.   public view(data)
  32.   {
  33.     this.start = true;

  35.   }

  37.     /**
  38.      * 完成viewChild初始前后执行
  39.      */
  40.   constructor(public appState: AppState,public dataService:DataService, @Inject(ElementRef) private elementRef: ElementRef) {
  41.       this.UnitConfig = new UnitConfig();
  42.   }


  45.   /**
  46.    * 完成viewChild初始化后执行
  47.    */
  48.   public ngAfterViewInit() {
  49.     //console.log(this.swiperContainer);
  50.   }
  51. //下拉加载
  52.   public onScrollDown () {  
  53.         if(this.start)
  54.         {
  55.            this.start = false;
  56.           this.binData();
  57.         }  
  58.     }
  59. // 上拉刷新
  60.   public  onScrollUp () {

  62.    }
  63. }
复制代码



页面
  1.    <ul class="invest_content"   swiper-scroll (scrollDown)="onScrollDown($event)" >
  2.             <li swiper-slide >

  4. </li>
  5. </ul>
复制代码








欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2