;

(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函數，使得提示框復原。

// ]]>

總結

以上是生活随笔為你收集整理的html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。