移动端刷新组件XtnScroll--Angular4实现

刷新组件

- 主要是学习一下Angular4所有花了我一天时间，写了这个刷新组件。

以项目开发当中，特别是手机移动端开发的时候，经常要用到就是上拉加载下一面，下拉刷新获取最新数据的功能。
在网也有很多类似的组件，前段时间用ReactJs写的项目的时候，就经常要用到，要是项目当时间也紧，从网找了一些，用来总是不那么顺手，后来干脆就自己写，这样也好控制。
在用第三库的，有个很大问题，就是样式，第三库的样式基本上已经定型的了，要修改很麻烦，不修改吧和产品设计那边又不好办，所以基本上不用。其实还有一个问题，想用第三库，有的时候，只想用它里的一个组件，可以引用的时候，往往得他们整个都的打包进去，要不能知道哪里会出什么情况。
种种情况吧项目里基本没有用到，要实现什么功能的组件基本上都自己写。向日期组件，弹消息组件，模式弹框组件，轮播组件等基本都自己写。

要想实现上拉加载，下拉刷新功能，移动端就得靠 touch事件，开始、移动及结束三个事件来实现

先创建三个文件分别是，Scroll.ts、Scroll.html、Scroll.scss文件里面的内容

1.Scroll.ts里大致内容如下：

@Component({
  selector: 'xtn-scroll',
  templateUrl: 'Scroll.html',
  styleUrls: ['Scroll.scss']
})
export class XtnScroll implements OnInit, OnChanges {
  constructor() {}
  ngOnInit():void{}
  ngOnChanges():void{}
  OnTouchStart(){}
  OnTouchMove(){}
  OnTouchEnd(){}
  ...
}

2.Scroll.html主要分三部分

内容分三部分：头、中、尾。

头部主要显示下拉刷新等信息
中部主要是显示从后台获取到的数据展示内容。
尾部显示，上拉获取下面等提示信息

<div class="scrollCss" (touchstart)="OnTouchStart($event)" (touchmove)="OnTouchMove($event)" (touchend)="OnTouchEnd($event)">
  <div #divTop class="top">
    <div class="title">{{Info.TitleTop}}</div>
  </div>
  <ng-content #divContent></ng-content>
  <div #divBottom class="bottom">
    <div class="title">{{Info.TitleBottom}}</div>
  </div>

</div>