Ruan Blog - 阮家森的博客 Ruan Blog - 阮家森的博客

VUE上拉加载,下拉刷新【存在无法上拉BUG】

in 前端read (689) 站长Ruan 文章转载请注明来源!
<!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>
    //VUE2.0以上需要把 v-el:uploading='' 换成 ref:uploading=''
    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>

代码出处:简书
作者:露露璐璐
链接:https://www.jianshu.com/p/514b8e549375

文章二维码

扫描二维码,在手机上阅读!

Vue.js
最后由Ruan修改于2018-07-26 18:10

此处评论已关闭

PREVIOUS NEXT
雷姆
拉姆