vue-pullrefresh
Vue組件實現(xiàn)下拉刷新功能
Github地址
效果圖
pullrefresh.gif
Demo地址
qrcode.jpeg
使用方式
組件的源碼路徑: ./src/components/pullRefresh.vue
說明
- 組件需要一個prop:next 類型為函數(shù)判沟，表示刷新函數(shù), 而且刷新函數(shù)需要為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來控制整體容器下移來顯示信息提示欄运敢。
設計思路
- 假定我們有一個容器Container(固定高度邑遏，并設置樣式overflow-y:auto),容器中的內容為Content(內容高度超出容器的高度)。由于內容高度已經(jīng)超過容器高度困曙，那么容器Container就會出現(xiàn)滾動條表伦。具體圖示如下：
pic1.jpg
當我們在頂部下拉的時候，希望能更新Content中的內容慷丽。即在Container的scrollTop為0的時候蹦哼，我們?在觸摸屏幕下拉能觸發(fā)刷新規(guī)則。
頂部信息的顯示采取?固定在Container的頂部要糊，通過下拉的距離控制頂部信息的顯示高度纲熏，從而達到下拉時顯示提示信息的效果。
pic2.jpg
