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("触发了");
                        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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 162,710评论 4赞 376
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,839评论 2赞 308
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 112,295评论 0赞 255
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,776评论 0赞 223
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 53,198评论 3赞 297
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 41,074评论 1赞 226
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,200评论 2赞 322
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,986评论 0赞 214
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,733评论 1赞 250
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,877评论 2赞 254
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,348评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,675评论 3赞 265
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,393评论 3赞 246
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,209评论 0赞 9
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,996评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,212评论 2赞 287
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 36,003评论 2赞 280

vue上拉加载,下拉刷新

推荐阅读更多精彩内容