基於Vue手寫一個下拉刷新

固然不乏有不少下拉刷新的插件能夠直接使用，可是自定義程度不強，大部分都只能改改文字，很難知足設計師的創意，譬如淘寶和京東首頁那種效果，就須要本身花心思倒騰了，最近恰好有這種需求，作完了稍微總結一下，具體看源碼便可。

思路

1. touchstart 記錄開始位置
2. touchmove 判斷上拉、下拉（暫時只用到了下拉）
3. touchend 根據下拉、上拉位置判斷是否達到下拉刷新、上拉加載更多
4. @scroll.passive="onScrollFn($event)" 記錄屏幕滾動，用來處理上滑時header rgba控制（沿用早期效果）
5. touchmove 會觸發onPulling，控制下拉時header opacity（參考目前淘寶效果）
6. 正在刷新時觸發refresh，此時有一個回彈效果
7. 刷新完無論成功失敗都有一個回調 refreshFinsh，做用是有時候沒有拉到刷新區域頁面回彈以後，相關的透明度可能沒法還原

props

1. offset 默認下拉高度
2. bounce 回彈高度 offset - bounce
3. maxScrollerHeight 最大下拉高度
4. enableRefresh 是否開啓刷新
5. onRefresh 達到刷新條件調用的方法
6. refreshFinsh 刷新完成後回調
7. onScroll 向上滑動中回調
8. onPulling 向下 下拉刷新中回調
9. frequency 頻率控制
10. power 滑動和下拉的像素比例（使之更易拉動）

使用示例

<scroller
    :on-refresh="refresh"
    :offset="100"
    :bounce="80"
    :maxScrollerHeight="130"
    :power="1.5"
    @refreshFinsh="refreshFinsh"
    @onScroll="onScroll"
    @onPulling="onPulling"
>
<template slot="pull-refresh">
    <!-- <span class="down-tip">下拉刷新</span>
    <span class="up-tip">鬆開刷新</span>
    <span class="refresh-tip">加載中..</span> -->
</template>
<div class="c-view-content">......</div>
</scroller>

使用案例

1. 源碼參考地址 傳送門
2. demo參考地址 傳送門

注意事項

1. ios touchmove移出屏幕可能不會觸發touchend，可用touchcancel
2. ios最外層容器默認是能夠滾動的，未達到刷新條件的時候須要e.preventDefault()

存在問題

1. 添加頻率限制後，出現滑動完需等待一會才能繼續滑動，這裏的滑動未區分普通滑動/下拉/上拉
2. 上拉加載更多TODO
3. touchmove 沒有使用節流函數