vue上拉加載,下拉刷新

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
    <style type="text/css">
        .pull-dou{
            height: 100%;
            overflow-y: auto;
            position: relative;
        }
        .pull-dou>.up-loading{
            line-height: 60px;
            text-align: center;
            width: 100%;
            position: absolute;
            transform: translateY(-100%);
            transition:transform 0.6s;
        }
        .pull-dou>.up-loading.showing{
            transform: translateY(0);
        }

        .pull-dou>.down-loading{}
    </style>
</head>
<body>

<div id="demo" style="height: 360px;">
    <pull-dou :top-pull="topPull" :bottom-pull="bottomPull">
        <div v-for="a in 66">99</div>
    </pull-dou>
</div>


<script>
    Vue.component("pull-dou",{
        template:
        "<div class='pull-dou' @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'>" +
        "   <div class='up-loading' v-el:uploading='' v-bind:class='{showing:state==\"loading-up\"}'>loading...</div>" +
        "       <slot></slot>" +
        "   <div class='down-loading' v-el:downloading>{{state=='loading-down'?'加載中':'下滑加載更多'}}</div>" +
        "</div>"
        ,
        attached:function(){
            this.init();
        },
        computed:{
            uploading:function(){return this.$els.uploading},
            downloading:function(){return this.$els.downloading},
            scrollEl:function(){return this.$el}
        },
        data:function(){
            return {
                bottomReached:false,
                distanceIndex:2,
                state:"",
                startY:0,
                beforeDiff:0,
                diff:0,
                startScrollTop:0
            }
        },

        props:{
            //下滑閾值
            triggerDistance:{default:70},
            triggerDistanceBottom:{default:60},
            topPull         :   {default:function(next){setTimeout(next,1200)}},
            bottomPull      :  {default:function(next){setTimeout(next,500)}},
        },
        methods:{
            checkBottomReached() {
                return this.scrollEl.scrollTop + this.scrollEl.offsetHeight + 1 >= this.scrollEl.scrollHeight;
            },

            _endTopPull:function(){
                var m = this;
                m.state=""
            },
            _endBottomPull:function(){
                var m = this;
                m.state="";
            },

            touchstart(event){
                this.startY = event.touches[0].clientY;
                this.beforeDiff = this.diff;
                this.startScrollTop = this.scrollEl.scrollTop;
                this.bottomReached = this.checkBottomReached();
            },
            touchmove(event){
                var m = this;
                this.currentY = event.touches[0].clientY;
                this.distance = (this.currentY - this.startY) / this.distanceIndex + this.beforeDiff;
                this.direction = this.distance > 0 ? 'down' : 'up';

                if (this.startScrollTop === 0 && this.direction === 'down') {
                    event.preventDefault();
                    event.stopPropagation();

                    if (this.distance >= this.triggerDistance &&  this.state !== 'loading-up' && this.state !== 'loading-down') {
                        //console.log("觸發(fā)了");
                        this.state = 'loading-up';
                        this.topPull(m._endTopPull);
                    }
                }else if(this.bottomReached && this.direction === 'up'){
                    if(this.state !== 'loading-up' && this.state !== 'loading-down'){
                        //console.log("到底了");
                        this.state = 'loading-down';
                        this.bottomPull(m._endBottomPull);
                    }
                }
            },
            touchend(event){},
            init:function(){
                var m = this;
                m._up_height = m.uploading.offsetHeight;
                m._down_height = m.downloading.offsetHeight;
            },

        }
    })
</script>
<script>
    function moniAjax(){
        return new Promise((resolve,reject)=>{
            setTimeout(resolve,Math.random()*2000 + 1000)
        })
    }
    new Vue({
        el:"#demo",
        data:{},
        methods:{
            topPull:function(next){
                console.log("這里寫刷新的代碼");
                moniAjax().then(function(){
                    next();
                })
            },
            bottomPull:function(next){
                console.log("這里寫刷新翻頁的代碼");
                moniAjax().then(function(){
                    next();
                })
            }
        }
    })
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末溶锭，一起剝皮案震驚了整個(gè)濱河市怎棱，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌鸡典，老刑警劉巖挣菲，帶你破解...
    沈念sama閱讀 207,248評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件贮喧，死亡現(xiàn)場(chǎng)離奇詭異顾瞪，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)抛蚁，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門陈醒，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人瞧甩，你說我怎么就攤上這事钉跷。” “怎么了肚逸？”我有些...
    開封第一講書人閱讀 153,443評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵爷辙，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我朦促，道長(zhǎng)膝晾，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,475評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任务冕，我火速辦了婚禮血当，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘禀忆。我一直安慰自己臊旭，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布箩退。 她就那樣靜靜地躺著离熏，像睡著了一般。 火紅的嫁衣襯著肌膚如雪戴涝。 梳的紋絲不亂的頭發(fā)上滋戳，一...
    開封第一講書人閱讀 49,185評(píng)論 1贊 284
  • 城市分裂傳說
    那天钻蔑，我揣著相機(jī)與錄音，去河邊找鬼胧瓜。 笑死矢棚，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的府喳。 我是一名探鬼主播蒲肋，決...
    沈念sama閱讀 38,451評(píng)論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼钝满！你這毒婦竟也來了兜粘？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 37,112評(píng)論 0贊 261
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤弯蚜，失蹤者是張志新（化名）和其女友劉穎孔轴，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碎捺，經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡路鹰，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了收厨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晋柱。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖诵叁，靈堂內(nèi)的尸體忽然破棺而出雁竞，到底是詐尸還是另有隱情，我是刑警寧澤拧额，帶...
    沈念sama閱讀 33,803評(píng)論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布碑诉，位于F島的核電站，受9級(jí)特大地震影響侥锦，放射性物質(zhì)發(fā)生泄漏进栽。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一恭垦、第九天 我趴在偏房一處隱蔽的房頂上張望泪幌。 院中可真熱鬧，春花似錦署照、人聲如沸祸泪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評(píng)論 0贊 19
  • 一樁弒父案建芙，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽没隘。三九已至，卻和暖如春禁荸，著一層夾襖步出監(jiān)牢的瞬間右蒲，已是汗流浹背阀湿。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評(píng)論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瑰妄，地道東北人陷嘴。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像间坐，于是被迫代替她去往敵國和親灾挨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2贊 344

推薦閱讀更多精彩內(nèi)容