看完這篇文章，相信大伙也一樣可以，做出一個自己的刷新，加載的組件
說這個功能之前，大家要先了解一下，要怎么觸發滾動條事件。
一定要注意，所有滾動事件都必須要滿足這個條件，橫向滾動條也一樣，
只要滿足子元素寬度大於父元素寬度就可以了。（下篇文章會講怎么實現一個橫向滾動條）
接入正題！！！
先來看看怎么剖析這個下拉刷新。
要用到的移動端的三個事件： touchstart(手指按下)，touchmove（手指移動），touchend（手指離開）
下拉刷新也就是（touchstart => touchmove(下移動) =>touchend）的一個過程
大體思路：
下拉主要與手指觸摸y軸點有關
1.記錄下手指按下y軸的坐標點
2.記錄手指移動時，移動的距離（注意：要判斷手指是向上移還是向下移，向上移就是滾動）
3.啟動下拉刷新事件
看代碼：
vue中要在methods里面注冊事件，在綁定到父元素上，這里大家應該都是用vue-cli搭建的項目了吧！
沒有的話，我回頭給個鏈接給大家，里面有已經搭建好的項目結構。包含這個插件的源碼，demo都在里面1
<template>
<div class="parent">
<div class="child"></div>
</div>
</template>
<script>
export default {
data(){
return {
top: 0,
startY: 0, // 保存 y軸點的位置
touching: false, // 代表當前是否處於 下拉刷新行為的開關，也就是當屬於滾動行為時，就要退出該事件機制
}
},
methods: {
touchStart(e) {
// e代表該事件對象，e.targetTouches[0].pageY可以拿到手指按下的 y軸點
this.startY = e.targetTouches[0].pageY
// 開啟下拉刷新狀態
this.touching = true
},
touchMove(e) {
//這個 touchMove，只要頁面在動都會發生的，所以 touching就起作用了
// 如果 touching為false，說明這個正在移動的頁面不是我們想要的下拉刷新，有可能是用戶隨意拉了一下頁面而已，或者其他
if(!this.touching) return
// 獲取移動的距離
let diff = e.targetToc=uches[0].pageY - this.startY
//判斷是向上拉還是向下拉
if(diff >０) {
e.preventDefault()
} else {
return
}
//這個this.top要對應綁定到該元素的transform: translateY(+top+ 'px')上，不然是無法拉動的
// 因此這里還要對偏移高度做一下處理，直接設置diff +(this.state === 2 ? 40 : 0) 太快了，因為拉取幅度太大
// 讓diff*0.25這樣子就差不多了
this.top = Math.floor(diff*0.25) + (this.state === 2 ? 40 : 0)
if（this.top >= 40）{
this.state = 1 //代表正在拉取
} else {
this.state = 0 // 代表初始轉態
}
}，
touchEnd(e) {
this.touching = false
if(this.state === 2) {
this.top = 40
return
}
// 判斷抬起時的高度，是大於40 就開啟刷新
if(this.top >= 40) {
this.refresh()
} else {
this.state = 0
this.top = 0
}
},
refresh() {
this.state = 2
this.top = 40
const self = this
// 這里可以調用父組件的方法去請求刷新接口
this.$emit('getRefresh', function(self){
//傳個回調過去，請求完數據就復原
self.state = 0
self.top = 0
})
}
}
}
</script>
到這里就完結了，當然現在肯定不能直接用的，要結合你的實際業務邏輯來用的，
我把demo放到github上了 ：
https://github.com/13725102796/css3-demo/blob/master/src/plugins/scroll/scroll.vue
看不懂的，建議整個項目拉下拉，跑一下，里面還有檢驗的插件，彈窗的等等，都是我在項目中用到，再抽出來的。
方法： git clone https://github.com/13725102796/css3-demo.git
同時，也歡迎各位提提 issues，或者各位想擴展一些其它的插件都可以。
最后，別忘了給個star！與君互勉，一起啃磚！
下一篇就講怎么做這個滾動加載！！！