移动端刷新组件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主要分三部分

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

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

<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>

3.Scroll.scss文件里就是样式了

展现一下，请看下图

上面向下拉的时候，提示的信息，

当拉到必定位置的时候，改变提示信息内容

松开手后，就会事件通知父级，让其调用接口获取数据去。

组件的使用

写好一个组件以后，就是怎么来使用了，下图就是如何使用组件的Demo

至于如何调用后台接口的，请 点击 查看，运行起来就能够看到了，固然还要配置数据链接什么的

之后有时间再把ReactJs、VueJs的刷新组件也写一下，其实都差很少。