下拉重新整理是很常見的應用需求，也是目前很主流的一種互動手段，之前一直使用的是mint-ui的load-more元件，但是要配置的項太多，比較複雜，今天有空自己寫了乙個下拉重新整理的元件，主要是自己體會一下這種元件的實現機制和編寫的難點，折騰了乙個小時，終於寫出了一版像樣一點的，也算是小有收穫吧，這邊文章記錄了寫該元件時遇到的一些問題及解決辦法。
首先，你需要會的知識點有：
1.h5的touch事件
2.父子元件的資料互動；插槽
3.promise()的用法
我們先來看一下效果圖:
是不是跟正常使用的差不多呢？這裡我只是實現了基本功能，對樣式、載入文字動畫什麼的都沒做處理，有興趣的讀者可以自己嘗試的去封裝乙個個性化的下拉重新整理元件。個人比較懶，所以下面先介紹整體思路和問題分析，再給出**。
首先，寫之前我們應該想想，這個元件適用的場景有哪些，當然常用的列表頁下拉重新整理就不用提了，還可以用在詳情頁的重新整理等場景。所以，我們這個元件就相當於乙個外層的容器，它可以下拉（移動），同時下拉結束之後還會觸發容器內部的資料變化。所以，這個元件的兩個重點，乙個是下拉時的移動實現，乙個是將下拉動作和資料進行繫結使其有互動。帶著這兩個問題，我們可以有針對性的往下繼續了。
我們知道，乙個div或其他元素運動，肯定是其樣式中有關位置或者大小的屬性有改變了。比如絕對定位時，left的值一直增加，該div就會一直往右移動；相對布局中，marginleft的值一直增加，該div也會一直右移。所以，我們可以通過操作外層容器的相關屬性，來達到下拉重新整理的展示效果。
那麼問題又來了，這個left或者是這個marginleft的值要增加多少呢？這就需要你知悉h5中的touch事件了，我不對這個事件做詳細介紹，總之它能獲取到你滑鼠點下（手機上是手指按下），移動，鬆開，取消的四個動作。有了這個api，我們的問題就迎刃而解了：我們可以在按下時記錄下開始位置，移動過程中記錄手指移動的距離，把這個值賦給margintop屬性，這樣我們的元件就可以隨著手指移動而移動對應的距離了，最後在手指鬆開的時候是不是就可以重新整理資料了呢？
上面的分析貌似是可行的，不過我們可以想一下，倘若我們一直往下拉，這個容器就會一直往下移動，雖然我們移動的距離有限，但是我們如果從該容器的頂部滑到底部，那這個容器就會移出我們的可視區，這樣的使用者體驗非常不好，我們下拉只是希望容器頂部顯示出下拉重新整理的提示字樣，然後隨著我們的移動的距離進行不同的提示，比如達到乙個值以後，可以提示「鬆開重新整理」，鬆開時可以提示「重新整理中...」等。所以我們不用讓容器一直隨著我們手指的移動而移動，給乙個界定的最大值就可以了。
最後乙個問題，當我們移動完了，資料也載入了，想要讓容器滾回它原來的位置怎麼辦呢？好辦，我們上面已經記錄下了移動的距離了，想要回去，不就是把margintop的值慢慢的減回原來的值不就行了嗎？乙個定時器就可以搞定了！
ok，接下來我們就要進行父子元件的互動了，這個也很簡單，子元件內emit一下繫結的方法就可以了。但是，我們要在資料載入完成後讓容器回位啊，我的資料載入方法是在父元件內，控制容器回位的方法是在子元件內的，怎麼辦呢？？
ok，你又知道了，用promise()啊，子元件內使用乙個promise,呼叫載入資料方法時，將resolve作為引數傳給父元件，父元件在載入完資料之後呼叫一下resolve就可以了！這樣子元件就可以做自己想做的事了。
詳細注釋都在**中。
.content-box
.present-box }}
}
.pull-content }}
}
1，上面說的，提示字樣放置的位置不能這麼投機取巧；
2，載入文字應該讓使用者自定義，應該作為props或者slots傳進來。最好還是slots比較好，可以加一些gif圖讓介面更好看。
3, 未新增容錯處理，所以健壯性有待改進。
如果您覺得這篇部落格對你有幫助，請給個star，這麼晚了寫個blog不容易。
當前專案的全部功能演示如圖所示：
謝謝！
自己寫的乙個Vue
下面這裡是我自己寫的乙個小型的vue，原理就是proxy proxy天生沒有prototype，因此要加上，不然extends會報錯 proxy.prototype proxy.prototype object.prototype class myvue extends proxy super da...
乙個自己實現的string
最近實現了乙個string 類，新增了一些c 11 元素。除了基本的構造析構函式，拷貝構造和賦值函式，另外新增移動拷貝和賦值函式。default是乙個很方便的特性有木有。default constructor kianstring default kianstring const char c ch...
開發乙個自己的 CSS 框架（五）
這一期我們繼續完成我們的網格布局 通過乙個 佔位符，來減少 輸出量。container padding right 15px padding left 15px margin right auto margin left auto container width 100 extend contain...