vue-pullrefresh

Vue組件實(shí)現(xiàn)下拉刷新功能

Github地址

效果圖

pullrefresh.gif

Demo地址

qrcode.jpeg

使用方式

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

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

說明

• 組件需要一個(gè)prop:next 類型為函數(shù)，表示刷新函數(shù), 而且刷新函數(shù)需要為Promise語(yǔ)法糖，只有當(dāng)next被resolve之后。提示信息才會(huì)消失
  組件代碼片段:

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

• 信息提示欄的顯示方式: 第一版下拉刷新使用的是通過控制 信息提示欄高度 = 下拉的距離 來控制，但是顯示效果在某些手機(jī)機(jī)型不流暢，所以這一版采用CSS3的transform來控制整體容器下移來顯示信息提示欄。

設(shè)計(jì)思路

1. 假定我們有一個(gè)容器Container(固定高度，并設(shè)置樣式overflow-y:auto),容器中的內(nèi)容為Content(內(nèi)容高度超出容器的高度)。由于內(nèi)容高度已經(jīng)超過容器高度，那么容器Container就會(huì)出現(xiàn)滾動(dòng)條。具體圖示如下：

pic1.jpg

2. 當(dāng)我們?cè)陧敳肯吕臅r(shí)候，希望能更新Content中的內(nèi)容。即在Container的scrollTop為0的時(shí)候，我們?在觸摸屏幕下拉能觸發(fā)刷新規(guī)則。

3. 頂部信息的顯示采取?固定在Container的頂部，通過下拉的距離控制頂部信息的顯示高度，從而達(dá)到下拉時(shí)顯示提示信息的效果。

pic2.jpg