成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

寫了一個下拉刷新插件

琛ｈ。 / 3398人閱讀

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

pullRefresh.js

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

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

html 結(jié)構(gòu) 

        

            

                

                
                下拉刷新
            

        

        
    
            
  • item1
    • 
            
  • item2
    • 
            
  • item3
    • 
            
  • item4
    • 
            
  • item5
    • 
            
  • item6
    • 
            
  • item7
    • 
            
  • item8
    • 
            
  • item9
    • 
            
  • item10
    •
用法 ?

只需要new一個 PullRefresh()對象

new PullRefresh( )
參數(shù) 
var flag1 = true;
var flag2 = true;　　　／／這兩個變量為了防抖，不要更改
var pullRefresh = new PullRefresh({
            pullContainer: container,　　　　　　　　／／父元素容器節(jié)點
            loadingContent: loadingContainer,　　?。⑿驴蚬?jié)點
            wholePullMode: true,　　　　　　　　　　?。w下拉模式，如上邊demo1
            loadingBoxPullMode: false,　　　　　　　?。⑿驴蛳吕Ｊ?，如上邊demo２
            MaxLoadingHeight: 60,　　　　　　　　　　?。吕⑿碌呐R界值和下拉框的高度一致
            transition: ".3s ease",　　　　　　　　　?。貜椷^渡效果
            loadingBefore: function(hasScroll) {　?。∮谒⑿屡R界值時執(zhí)行的函數(shù)，其中 hasScroll為下拉的距離，可以根據(jù)距離自定義動畫效果
                if(hasScroll < 60){　　　　　　　　　　?。∮谒⑿屡R界值時執(zhí)行
                    if(flag1 == true){　　　　　　　
                        ／／在這里執(zhí)行dom操作
                    }
                    flag1 = false;　
                    flag2 = true;
                }
            },
            prepareLoading: function(hasScroll) {　　／／大于刷新臨界值時執(zhí)行的函數(shù)
                if(hasScroll > 60){　　　　　　　　　　　?。笥谒⑿屡R界值時執(zhí)行
                    if(flag2 == true){　　　　　　　　　　
                        ／／在這里執(zhí)行dom操作
                    }
                    flag2 = false;　　
                    flag1 = true;
                }
            },
            loading: function() {    //刷新  
                ／／刷新時的dom操作
            },
            ajax: function() {
                ／／ajax請求及插入列表
            },
            loaded: function(hasScroll) {
                ／／加載完成的dom操作
            }
        })

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94149.html

相關(guān)文章

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

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

    frontoldman 評論0 收藏0

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

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

    ztyzz 評論0 收藏0

  • 實現(xiàn)移動端上拉加載和下拉刷新的vue插件(mescroll.js)

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

    hightopo 評論0 收藏0

  • 下拉刷新，上拉加載 的基礎(chǔ)款（基本實現(xiàn)）

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

    DrizzleX 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<