詳解vue移動端 下拉刷新

看完這篇文章，相信大夥也同樣能夠，作出一個本身的刷新，加載的組件

說這個功能以前，你們要先了解一下，要怎麼觸發滾動條事件。

必定要注意，全部滾動事件都必需要知足這個條件，橫向滾動條也同樣，

只要知足子元素寬度大於父元素寬度就能夠了。（下篇文章會講怎麼實現一個橫向滾動條）

接入正題！！！

先來看看怎麼剖析這個下拉刷新。

要用到的移動端的三個事件： touchstart(手指按下)，touchmove（手指移動），touchend（手指離開）

下拉刷新也就是（touchstart => touchmove(下移動) =>touchend）的一個過程

大致思路：

下拉主要與手指觸摸y軸點有關

   1.記錄下手指按下y軸的座標點

   2.記錄手指移動時，移動的距離（注意：要判斷手指是向上移仍是向下移，向上移就是滾動）

   3.啓動下拉刷新事件

看代碼：

　　vue中要在methods裏面註冊事件，在綁定到父元素上，這裏你們應該都是用vue-cli搭建的項目了吧！

沒有的話，我回頭給個連接給你們，裏面有已經搭建好的項目結構。包含這個插件的源碼，demo都在裏面

<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/1372510279...

看不懂的，建議整個項目拉下拉，跑一下，裏面還有檢驗的插件，彈窗的等等，都是我在項目中用到，再抽出來的。

方法： git clone https://github.com/1372510279...

同時，也歡迎各位提提 issues，或者各位想擴展一些其它的插件均可以。

最後，別忘了給個star！與君互勉，一塊兒啃磚！

下一篇就講怎麼作這個滾動加載！！！