码迷,mamicode.com
首页 > 其他好文 > 详细

上拉加载 下拉刷新

时间:2018-11-02 13:01:04      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:结束   fixed   his   计算   listener   http   ubi   listen   分享   

作者:信心 

https://juejin.im/post/5b9091e7e51d450e70423161

  

我们依旧从界面及逻辑两块进行分析

 

1.界面上,只分成简单的两块,一块是上方的刷新文字,一块是下方的内容,然后将上方提示内容隐藏在屏幕之外,一般由两种方式,一种是上面遮一层,另一种是marginTop:负值将其弄出屏幕外,这里我采用的是第一种,代码也很简单,就随便贴一下。

 

 

.header{

    width100%;

    height1rem;这里的高度应该与刷新文字一样高

    positionfixed;

    z-index100;

}

 

2. 功能实现的重头戏是在逻辑上,主要分成下面几个部分

 

  • 监听事件

  • 位置计算

  • 控制界面变化

  • 数据更新包

 

我一个一个进行分析,然后带你们入坑。

 

 

监听事件,这块简单,直接贴代码

 

 

//el为下拉的整个节点

// 这里为添加监听

this.el.addEventListener(‘touchstart‘, this.refreshTouchStart);

this.el.addEventListener(‘touchmove‘, this.refreshTouchMove);

this.el.addEventListener(‘touchend‘, this.refreshTouchEnd);

//记住在不用的时候要移除监听哦

this.el.removeEventListener(‘touchstart‘, this.refreshTouchStart);

this.el.removeEventListener(‘touchmove‘, this.refreshTouchMovee);

this.el.removeEventListener(‘touchend‘, this.refreshTouchEnd);

//具体的函数,我们直接在位置计算中看

 

位置计算 我们分下拉刷新,上拉加载两块计算,分析可得

 

下拉刷新的逻辑 = 当前页面的首项在屏幕中且容器向下滑动的距离大于一定值

 

上拉加载的逻辑 = 当前页面已滑动到底部

 

好,我们直接看具体的实现逻辑代码

 

 

//代码中包含界面变化和数据更新,仔细看哦

refreshTouchStart(e) {

    let touch = e.changedTouches[0];

    this.tipText = ‘下拉刷新‘;

    //下拉提示文字    

    this.startY = touch.clientY;//获得当前按下点的纵坐标

}

refreshTouchMove(e) {

    this.$store.commit(‘bottomShowFalse‘);//与本逻辑无关,滑动时隐藏底部作用   

    let touch = e.changedTouches[0];

    let _move = touch.clientY - this.startY;//获得滑动的距离   

    this.bottomFlag = $(‘.present-box‘).offset().top + $(‘.present-box‘).height() - document.body.clientHeight<= 40;//滑动到底部标识 

    if ($(‘.present-box‘).offset().top >= this.headerHeight) {

        //内容主体超出了一个头部的距离     

        if (_move > 0 && _move < 1000) {

            //滑动距离>0代表下拉//<1000是为了防止神人无限拉阿拉    

            this.el.style.marginTop = _move + ‘px‘;//根据拉的距离,实现界面上的变化(界面变化)  

            this.moveDistance = touch.clientY - this.startY;//记录滑动的距离,在松手后让他滑啊滑滑回去 

            if (_move > 50) {//拉到一定程度再下拉刷新,防止误操作      

                this.tipText = ‘松开即可刷新‘//上面有了     

            }

        }

    }

},

refreshTouchEnd() {

    this.$store.commit(‘bottomShowTrue‘);//松开后底部就biu的出现啦   

    if (this.bottomFlag) {//若符合上拉加载的条件,则直接进行数据更新   

        this.$emit(‘loadBottom‘);

    }

    let that = this;

    if (this.moveDistance > 50) {

        //拉了一定距离才触发加载动作  

        this.tipText = ‘数据加载中...‘;

        let timer = setInterval(function () {

            that.el.style.marginTop = that.el.style.marginTop.split(‘px‘)[0] - 5 + ‘px‘;//如果拉的很长,一次性弹回去影响用户体验,所以先让他弹到50的高度,然后再进行数据更新

            if (Number(that.el.style.marginTop.split(‘px‘)[0]) <= 50) {//小于50后就不进行界面变化了,先进行数据更新再变化

                clearInterval(timer);

                new Promise((resolve, reject) => {

                    that.$emit(‘loadTop‘, resolve, reject);//通知父控件,下拉刷新条件满足了,你更新吧

                }).then(() => {

                    that.resetBox();

                }).catch(() => {

                    that.resetBox();//界面恢复(也就是弹回去啦)

                });

            }

        }, 1);//通过一个promise,让数据更新结束后再进行界面变化。也可以采用其他的方式,如async await方式

    } else {

        this.resetBox();

    }

}

resetBox() {

    let that = this;

    //使用定时器的方式,biubiubiu的实现滑动界面刷新的效果。

    if (this.moveDistance > 0) {

        let timer = setInterval(function () {

            that.el.style.marginTop = that.el.style.marginTop.split(‘px‘)[0] - 1 + ‘px‘;

            if (Number(that.el.style.marginTop.split(‘px‘)[0]) <= 0) clearInterval(timer);//这里很重要,不删除,可能看到奇奇怪怪的东西哦

        }, 1)

    }

    this.moveDistance = 0;

}

 

核心代码就这些了,撒花完结,优化什么的,你们自己看着来咯,大佬别打我,效果图来了嘛

技术分享图片

上拉加载 下拉刷新

标签:结束   fixed   his   计算   listener   http   ubi   listen   分享   

原文地址:https://www.cnblogs.com/dtdxrk/p/9895479.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!