寫了一個下拉刷新插件

琛ｈ。發布于2019-08-22 16:13 / 3374人閱讀

摘要：是一款下拉刷新插件，開放一些鉤子函數，可以在刷新的各種狀態中做一些操作，包括刷新中的動畫及操作，另外開放下拉框的實時下拉數據，可以完全自定義自己的下拉組件，做出不同下拉動畫效果。

pullRefresh.js

pullRefresh.js 是一款下拉刷新插件，開放一些鉤子函數，可以在刷新的各種狀態中做一些操作，包括刷新中的動畫及dom操作，另外開放下拉框的實時下拉數據，可以完全自定義自己的下拉組件，做出不同下拉動畫效果。

pullRefresh.js 支持兩種下拉模式，一種是整體下拉，一種是loading框下拉，如下
demo1 https://tls1234.github.io/pul...
demo2 https://tls1234.github.io/pul...

html 結構

用法 ?

只需要new一個 PullRefresh()對象

new PullRefresh( )

參數

var flag1 = true;
var flag2 = true;　　　／／這兩個變量為了防抖，不要更改
var pullRefresh = new PullRefresh({
            pullContainer: container,　　　　　　　　／／父元素容器節點
            loadingContent: loadingContainer,　　　／／刷新框節點
            wholePullMode: true,　　　　　　　　　　　／／整體下拉模式，如上邊demo1
            loadingBoxPullMode: false,　　　　　　　　／／刷新框下拉模式，如上邊demo２
            MaxLoadingHeight: 60,　　　　　　　　　　　／／下拉刷新的臨界值和下拉框的高度一致
            transition: ".3s ease",　　　　　　　　　　／／回彈過渡效果
            loadingBefore: function(hasScroll) {　　／／小于刷新臨界值時執行的函數，其中 hasScroll為下拉的距離，可以根據距離自定義動畫效果
                if(hasScroll < 60){　　　　　　　　　　　／／小于刷新臨界值時執行
                    if(flag1 == true){　　　　　　　
                        ／／在這里執行dom操作
                    }
                    flag1 = false;　
                    flag2 = true;
                }
            },
            prepareLoading: function(hasScroll) {　　／／大于刷新臨界值時執行的函數
                if(hasScroll > 60){　　　　　　　　　　　　／／大于刷新臨界值時執行
                    if(flag2 == true){　　　　　　　　　　
                        ／／在這里執行dom操作
                    }
                    flag2 = false;　　
                    flag1 = true;
                }
            },
            loading: function() {    //刷新  
                ／／刷新時的dom操作
            },
            ajax: function() {
                ／／ajax請求及插入列表
            },
            loaded: function(hasScroll) {
                ／／加載完成的dom操作
            }
        })

歡迎star https://github.com/tls1234/pu...

GPU云服務器云服務器下拉刷新下拉刷新空白下拉刷新控件下拉刷新框架

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

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

下拉刷新，上拉加載插件mescroll源碼分析

摘要：最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。于是學習了下別人的插件（ps : 既然寫不出好插件，就要會學習別人的）：官網github地址：https://github.com/mescroll/m... 1.整體預發結構 ;(function(name, definition) {...

frontoldman 2019-08-26 12:09 評論0 收藏0
下拉刷新，上拉加載插件mescroll源碼分析

摘要：最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。最近項目要求增加一個下拉刷新的功能，自己也試著寫了一個，單總是有點卡頓。于是學習了下別人的插件（ps : 既然寫不出好插件，就要會學習別人的）：官網github地址：https://github.com/mescroll/m... 1.整體預發結構 ;(function(name, definition) {...

ztyzz 2019-08-02 11:03 評論0 收藏0
實現移動端上拉加載和下拉刷新的vue插件(mescroll.js)

摘要：做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個插件好一點安裝不要使用安裝導入在哪個頁面使用則在哪個頁面導入這里的話，我使用全局導入會出現問題若有錯還請大家指出暫時想到的就是局部引入注冊組件注冊組件做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個mescroll.js插件好一點 1.npm安裝 npm ins...

hightopo 2019-08-23 11:58 評論0 收藏0
下拉刷新，上拉加載的基礎款（基本實現）

摘要：前言現在網上下拉刷新，上拉加載插件一搜一大堆，如果你想用在生產環境，那你可以直接網上搜一個靠譜的，我所做的就是不依賴任何插件，一步一步把這個插件的過程寫一下，各位同學可以在此基礎上定制，沒有寫過插件的，可以了解下插件怎么寫的，整個過程定位入前言現在網上下拉刷新，上拉加載插件一搜一大堆，如果你想用在生產環境，那你可以直接網上搜一個靠譜的，我所做的就是不依賴任何插件，一步一步把這個...

DrizzleX 2019-08-26 11:36 評論0 收藏0