html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件

;

(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 = 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 class="lazyload" src="https://img-blog.csdnimg.cn/2022010621340643065.png" data-original="./dropDown-es5.js"

然后在下面构造函数传入id，实例化一个对象var dropDown = new DropDown('dropDown', 60, function () { setTimeout(() => { this.back(); }, 1000); }, '下拉进行加载','加载中...');并且只有id是必须的，其他参数都是默认的，也可以自己传入

第一个参数为id，必填

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

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

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

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

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

// ]]>