vue.js實現下拉刷新組件

Berwin 發布于2019-08-20 17:17 / 3107人閱讀

摘要：組件實現下拉刷新功能地址效果圖地址使用方式組件的源碼路徑說明組件需要一個類型為函數，表示刷新函數而且刷新函數需要為語法糖，只有當被之后。

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來控制整體容器下移來顯示信息提示欄。

設計思路

假定我們有一個容器Container(固定高度，并設置樣式overflow-y:auto),容器中的內容為Content(內容高度超出容器的高度)。由于內容高度已經超過容器高度，那么容器Container就會出現滾動條。具體圖示如下：

當我們在頂部下拉的時候，希望能更新Content中的內容。即在Container的scrollTop為0的時候，我們在觸摸屏幕下拉能觸發刷新規則。

頂部信息的顯示采取固定在Container的頂部，通過下拉的距離控制頂部信息的顯示高度，從而達到下拉時顯示提示信息的效果。

GPU云服務器云服務器下拉列表組件下拉刷新下拉刷新空白下拉刷新控件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83467.html

有贊vant-ui Tabs、List、PullRefresh組件實踐

摘要：建議，每個欄目下放一個空列表組件，將空組件放在下拉刷新組件里面。下拉刷新請求兩次。請求結束后必須把下拉刷新綁定的置為，要不然又會多請求一次魅族手機按鍵返回桌面，再重新回到后列表上下劃不動。魅族的返回鍵問題，在換用列表插件后得到解決。 Vant ui + Vue.js 部分組件實踐功能需求是實現一個移動端的欄目列表切換，于此同時列表需要進行下拉刷新，上拉加載如下圖，大概是一個這樣...

habren 2019-08-26 12:17 評論0 收藏0
基于Vue.js的音樂播放器（Webapp）

摘要：概述項目是基于，成品是一個移動端的音樂播放器，來源于的實戰課程。播放器是全局組件，放在下面，通過傳遞數據，觸發提交，從而使播放器開始工作。將請求的數據格式化后再通過傳遞，組件間共享，實現歌曲的播放切換等。概述項目是基于Vue.js，成品是一個移動端的音樂播放器，來源于imooc的實戰課程。自己動手實踐并加以修改拓展。項目的大致流程是Vue-cli構建開發環境，分析需求，設計構思，規...

widuu 2019-08-20 18:23 評論0 收藏0
2月份前端資源分享

摘要：月份前端資源分享更多資源請文章轉自前端生成好看的二維碼十大經典排序算法帶動圖演示為什么知乎前端圈普遍認為游戲和展示的個人整理和封裝的庫中文詳細注釋供新手學習使用擴展語法記錄掉坑初期工具漢字拼音轉換工具實現漢字轉拼音的插件下拉列表支持拼音簡 2月份前端資源分享更多資源請Star：https://github.com/maidishike... 文章轉自：https://github...

yanwei 2019-08-20 14:25 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

lily_wang 2019-06-27 16:28 評論0 收藏0