資訊專欄INFORMATION COLUMN
摘要：組件實(shí)現(xiàn)下拉刷新功能地址效果圖地址使用方式組件的源碼路徑說明組件需要一個(gè)類型為函數(shù)，表示刷新函數(shù)而且刷新函數(shù)需要為語法糖，只有當(dāng)被之后。
vue-pullrefresh
Github地址 效果圖 Demo地址 使用方式Vue組件實(shí)現(xiàn)下拉刷新功能
說明git clone https://github.com/watson-yan...
組件的源碼路徑: ./src/components/pullRefresh.vue
組件需要一個(gè)prop:next 類型為函數(shù)，表示刷新函數(shù), 而且刷新函數(shù)需要為Promise語法糖，只有當(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ì)思路假定我們有一個(gè)容器Container(固定高度，并設(shè)置樣式overflow-y:auto),容器中的內(nèi)容為Content(內(nèi)容高度超出容器的高度)。由于內(nèi)容高度已經(jīng)超過容器高度，那么容器Container就會(huì)出現(xiàn)滾動(dòng)條。具體圖示如下：
當(dāng)我們?cè)陧敳肯吕臅r(shí)候，希望能更新Content中的內(nèi)容。即在Container的scrollTop為0的時(shí)候，我們?cè)谟|摸屏幕下拉能觸發(fā)刷新規(guī)則。
頂部信息的顯示采取固定在Container的頂部，通過下拉的距離控制頂部信息的顯示高度，從而達(dá)到下拉時(shí)顯示提示信息的效果。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83467.html
摘要：建議，每個(gè)欄目下放一個(gè)空列表組件，將空組件放在下拉刷新組件里面。下拉刷新請(qǐng)求兩次。請(qǐng)求結(jié)束后必須把下拉刷新綁定的置為，要不然又會(huì)多請(qǐng)求一次魅族手機(jī)按鍵返回桌面，再重新回到后列表上下劃不動(dòng)。魅族的返回鍵問題，在換用列表插件后得到解決。 Vant ui + Vue.js 部分組件實(shí)踐 功能需求是實(shí)現(xiàn)一個(gè)移動(dòng)端的欄目列表切換，于此同時(shí)列表需要進(jìn)行下拉刷新，上拉加載 如下圖，大概是一個(gè)這樣...
摘要：概述項(xiàng)目是基于，成品是一個(gè)移動(dòng)端的音樂播放器，來源于的實(shí)戰(zhàn)課程。播放器是全局組件，放在下面，通過傳遞數(shù)據(jù)，觸發(fā)提交，從而使播放器開始工作。將請(qǐng)求的數(shù)據(jù)格式化后再通過傳遞，組件間共享，實(shí)現(xiàn)歌曲的播放切換等。 概述 項(xiàng)目是基于Vue.js，成品是一個(gè)移動(dòng)端的音樂播放器，來源于imooc的實(shí)戰(zhàn)課程。自己動(dòng)手實(shí)踐并加以修改拓展。項(xiàng)目的大致流程是Vue-cli構(gòu)建開發(fā)環(huán)境，分析需求，設(shè)計(jì)構(gòu)思，規(guī)...
摘要：月份前端資源分享更多資源請(qǐng)文章轉(zhuǎn)自前端生成好看的二維碼十大經(jīng)典排序算法帶動(dòng)圖演示為什么知乎前端圈普遍認(rèn)為游戲和展示的個(gè)人整理和封裝的庫中文詳細(xì)注釋供新手學(xué)習(xí)使用擴(kuò)展語法記錄掉坑初期工具漢字拼音轉(zhuǎn)換工具實(shí)現(xiàn)漢字轉(zhuǎn)拼音的插件下拉列表支持拼音簡(jiǎn) 2月份前端資源分享 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github...
平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
閱讀 2037·2021-11-24 11:16
閱讀 3326·2021-09-10 10:51
閱讀 3337·2021-08-03 14:03
閱讀 1334·2019-08-29 17:03
閱讀 3308·2019-08-29 12:36
閱讀 2338·2019-08-26 14:06
閱讀 558·2019-08-23 16:32
閱讀 2845·2019-08-23 13:42
