移動端刷新組件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的刷新組件也寫一下，其實都差很少。