继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

用原生js+css3撸的一个下拉手势事件插件

东方既白233
关注TA
已关注
手记 44
粉丝 38
获赞 153
;
(function () {
    var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {}, tip = '下拉进行加载', loadingTip = '努力加载中...') {
        //获取下拉元素节点
        this.dropDown = document.getElementById(dropId);
        //下拉之前的提示
        this.tip = tip;
        //下拉之后的提示
        this.loadingTip=loadingTip;
        //下拉之后的回调函数
        this.callBack = callBack;
        //下拉距离,同时也是提示框的高度
        this.distance = distance;
        //获取下拉元素的父节点
        this.parentEle = this.dropDown.parentNode;
        //提示框节点
        this.tipDiv = null;
        this.isLock = false;
        //这两个变量的作用在于防止二次滑动,在第一次滑动没有达到指定距离而触发回调的时候,会强制进行回弹,此时isLock被设置为fasle,防止二次滑动。
        //滑动后数据加载完成之前不允许有第二次的滑动,避免来触发第二次的回调函数。故而isDone是用来控制触发回调的状态的,isDOne为true时候,证明还没有触发回调,可以进行滑动,当触发回调之后,会将isDone设置为fasle,在回调完成前,禁止进行滑动,进而再次触发回调。
        //如果滑动不到距离,那么会将状态复原,如果滑动到达需要距离,那么会进行回调事件次数调用的限制,然后在回调完成后再进行复原。
        this.isDone = false;
        this.startPoint = null;
        this.movePoint = null;
        //初始化提示框元素
        this.initEle();
        //初始化提示框样式
        this.initCss();
        //绑定手指触摸开始事件
        this.dropDown.addEventListener('touchstart', this.touchStart.bind(this), false);
        //绑定手指移动事件
        this.dropDown.addEventListener('touchmove', this.touchMove.bind(this), false);
        //绑定手指触摸结束事件
        this.dropDown.addEventListener('touchend', this.touchEnd.bind(this), false);
    }
    DropDown.prototype.initEle = function () {
        this.tipDiv = document.createElement('div');
        this.tipDiv.setAttribute('class', 'tipDiv');
        this.dropDown.setAttribute('class', 'dropDown')
        this.tipDiv.innerHTML = this.tip;
        let first = this.dropDown.firstChild;
        this.dropDown.insertBefore(this.tipDiv, first);
    }
    DropDown.prototype.initCss = function () {
        let styleEle = document.createElement('style');
        styleEle.innerHTML += `.dropDown .tipDiv{height:${this.distance}px;line-height:${this.distance}px;text-align:center;width:100%;}`;
        styleEle.innerHTML += `.dropDown{width:100%;transform:translate(0px,-${this.distance}px)}`;
        document.head.appendChild(styleEle);
    }
    DropDown.prototype.setTransform = function (dis) {
        this.dropDown.style.webkitTransform = `translate(0px,${dis}px)`;
        this.dropDown.style.transform = `translate(0px,${dis}px)`;
    }
    DropDown.prototype.setTransition = function (time) {
        this.dropDown.style.webkitTransition = `all ${time}s)`;
        this.dropDown.style.transition = `all ${time}s)`;
    }
    DropDown.prototype.back = function () {
        this.tipDiv.innerHTML=this.tip;
        this.setTransform(-this.distance);
        this.isLock = false;
    }
    DropDown.prototype.touchStart = function (e = window.event) {
        if (this.parentEle.scrollTop <= 0 && !this.isLock) {
            this.startPoint = e.touches[0];
            this.isLock = true;
            this.isDone = true;
            this.setTransition(0);
        }
    }
    DropDown.prototype.touchMove = function (e = window.event) {
        if (this.parentEle.scrollTop <= 0 && this.isDone) {
            this.movePoint = e.touches[0];
            let startY = this.startPoint.pageY;
            let moveY = this.movePoint.pageY;
            if (startY < moveY) { e.preventDefault(); this.setTransition(0); this.setTransform(moveY - startY - this.distance); } } } DropDown.prototype.touchEnd = function (e = window.event) { if (this.isDone) { this.isDone = false; if (this.movePoint.pageY - this.startPoint.pageY >= this.distance) {
                this.tipDiv.innerHTML=this.loadingTip;
                this.setTransition(1);
                this.setTransform(0);
                this.callBack();
            } else {
                this.back();
            }
        }
        this.endPoint = e.changedTouches[0];
    }
    this.DropDown = DropDown;
})();

# dropDown
用原生js+css3撸的一个下拉(刷新)事件插件 dropDownDemo(电脑pc肯定是没有触摸事件的,需要打开控制台模拟手机,或者复制链接手机浏览)

对于需要实现下拉事件的的元素,在其外层包裹写一个div元素,以及设置这个div元素的id为你想要的。
在这里html跟css样式写不出来,所以要去github的readme上看
对于html元素部分,例如我想要给包含xiaodemo的元素设置下拉事件,那么我只要在它的外层包裹一层div,并且设置它的id就行了,至于什么样的样式是随你的。
那么js代码部分:
首先引入插件文件

script src="./dropDown-es5.js"

然后在下面构造函数传入id,实例化一个对象

var dropDown = new DropDown('dropDown', 60, function () { setTimeout(() => { this.back(); }, 1000); }, '下拉进行加载','加载中...');
  • 并且只有id是必须的,其他参数都是默认的,也可以自己传入

  • 第一个参数为id,必填

  • 第二个参数为下拉距离,同时也是提示框的高度,非必填,默认为60

  • 第三个参数为回调函数,回调函数this默认绑定到dropDown这个构造函数实例化的对象上,非必填,默认为空函数

  • 第四个参数为下拉触发回调函数之前的提示,非必填,默认为’下拉进行加载’

  • 第五个参数为下拉触发回调函数后的提示,非必填,默认为’加载中…’

  • 注意:第三个参数的回调函数需要在最后调用this.back函数,使得提示框复原。

// ]]>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP