vue.js實現下拉刷新組件

vue-pullrefresh

Vue組件實現下拉刷新功能

Github地址

效果圖

Demo地址

使用方式

git clone https://github.com/watson-yan...

組件的源碼路徑: ./src/components/pullRefresh.vue

說明

• 組件須要一個prop:next 類型爲函數，表示刷新函數, 並且刷新函數須要爲Promise語法糖，只有當next被resolve以後。提示信息纔會消失
  組件代碼片斷:

this.next().then(() => {
              this.flag = 0
              this.loading = 0
              container.scrollTop = 0
              container.style.overflow = 'auto'
              container.style.transform = 'translate3D(0px, 0px, 0px)'
          })

• 信息提示欄的顯示方式: 初版下拉刷新使用的是經過控制 信息提示欄高度 = 下拉的距離 來控制，可是顯示效果在某些手機機型不流暢，因此這一版採用CSS3的transform來控制總體容器下移來顯示信息提示欄。

設計思路

1. 假定咱們有一個容器Container(固定高度，並設置樣式overflow-y:auto),容器中的內容爲Content(內容高度超出容器的高度)。因爲內容高度已經超過容器高度，那麼容器Container就會出現滾動條。具體圖示以下：

1. 當咱們在頂部下拉的時候，但願能更新Content中的內容。即在Container的scrollTop爲0的時候，咱們在觸摸屏幕下拉能觸發刷新規則。

2. 頂部信息的顯示採起固定在Container的頂部，經過下拉的距離控制頂部信息的顯示高度，從而達到下拉時顯示提示信息的效果。