背景

使用過很多下拉刷新，上拉加載的插件，雖然也知道一點原理，但似乎一直不太完全能理解它，閑來無事，手寫一個，感受下，借鑒了better-scroll的源碼，功能當然相差甚遠，也只是個簡易版的實現，大概就這意思。

Document

html,body,ul,li,div,input{

padding: 0;

margin: 0;

}

#header {

background: red;

}

#input{

display: inline-block;

width: 80%;

height: 30px;

}

#submit {

display: inline-block;

width: 16%;

height: 30px;

}

#article {

position: relative;

height: calc(100vh - 34px);

overflow:scroll;

}

#list {

position: relative;

list-style: none;

width: 100%;

top: 0px;

}

/* 刷新 */

#refresh {

position: absolute;

top: -50px;

left: 0;

width: 100%;

height: 50px;

overflow: hidden;

color: #969799;

font-size: 14px;

line-height: 50px;

text-align: center;

}

#text {

border: none;

line-height: 30px;

height: 30px;

text-align: center;

}

.li{

display: flex;

justify-content: center;

line-height: 80px;

height:80px;

border-bottom: 1px solid #999;

}

.load-icon{

height: 50px;

line-height: 50px;

text-align: center;

background: #f0f3f6;

}

#loading {

display: none;

}

下拉即可刷新...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

加載更多

let article = document.getElementById('article'), // 獲取包裹ul列表的div

list = document.getElementById("list"), // 列表

loadingDom = document.getElementById("loading"), // 加載dom

loadingText = loadingDom.querySelector('.text'), // 寫著“加載更多”的元素

// 下拉刷新變量

refreshDom = document.getElementById("refresh"), // 刷新dom

refreshText = refreshDom.querySelector('.text'), // 寫著“下拉刷新”的元素

start = null, // 輔助變量：觸摸開始時，相對于文檔頂部的Y坐標

refresh = false; // 輔助變量：是否刷新

let num = 11; // 要添加的li文本，可自定義

let finish = false; // 是否繼續加載

let loading = false; // 是否正在加載

// 追加li的方法，可自定義

function addLi() {

let fragment = document.createDocumentFragment();

loading = true;

for(let i=0;i<10;i++) {

let li = document.createElement('li');

li.className = 'li';

li.innerHTML = num++;

fragment.appendChild(li); // 用DocumentFragment提高渲染速度

}

setTimeout(function(){

ul.appendChild(fragment);

finish = true; // 設置加載到最低了

loadingText.innerHTML = "已經到底了~";

loading = false

},2000)

}

// 拷貝數組

var toConsumableArray = function (arr) {

if (Array.isArray(arr)) {

for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

return arr2;

} else {

return Array.from(arr);

}

};

// 事件注冊

function eventMixin(BScroll) {

// 注冊事件

BScroll.prototype.on = function (type, fn) {

var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this;

if (!this._events[type]) {

this._events[type] = [];

}

this._events[type].push([fn, context]);

};

// 銷毀事件

BScroll.prototype.off = function (type, fn) {

var _events = this._events[type];

if (!_events) {

return;

}

var count = _events.length;

while (count--) {

if (_events[count][0] === fn) {

_events[count][0] = undefined;

}

}

};

}

/**

* new Bscroll(this.$refs.wrapper, {})

* 參數1：滾動外層dom

* 參數2：配置條件

*/

function BScroll(dom,{}){

let that = this;

this._events = {}; // init private custom events

this.x = 0; // 水平軸移動距離(水平功能暫不考慮，目前只玩y軸)

this.y = 0; // 縱軸移動距離

//獲取元素滾動條卷曲的高度

this.getScrollTop = function(ele) {

return ele.scrollTop || 0;

}

//獲取當前可視范圍的高度

this.getClientHeight = function(ele) {

return ele.clientHeight || 0;

}

//獲取文檔完整的高度

this.getScrollHeight = function(ele){

return ele.clientHeight || 0;

}

// 觸發touchmove事件

this.touchmoveHandle = function(){

this.trigger('touchmove',{

x: this.x,

y: this.y

})

}

// 觸發touchend事件

this.touchendHandle = function(){

this.trigger('touchend',{

x: this.x,

y: this.y

})

}

// 滑動開始

article.addEventListener('touchstart',function(event){

let touch = event.touches[0];

start = touch.pageY; // 輔助變量：觸摸開始時，相對于文檔頂部的Y坐標

},false);

// 監聽滑動事件

article.addEventListener('touchmove',function(event){

// 下拉刷新

let touch = event.touches[0];

// console.log(article.scrollTop)

// 下拉

if(article.scrollTop<=0){

console.log("下拉")

// 如果ul列表到頂部，修改ul列表的偏移,顯示“下拉刷新”，并準備觸發下拉刷新功能，可自定義

let diff = list.offsetTop + touch.pageY - start;

diff = diff >= 0 ? diff : 0;

list.style.top = diff +'px'; // ul.style.top = ul.offsetTop + 'px'

start = touch.pageY;

// console.log("list.style.top:",list.style.top)

// 若ul偏移量過大,則修改文字,refresh置為true,配合'touchend'刷新

if(list.offsetTop>=50) {

refreshText.innerHTML = "釋放刷新";

refresh = true;

}

}else{

// 上拉

console.log("上拉")

// console.log("getScrollHeight:",that.getScrollHeight(list))

// console.log("getScrollTop:",that.getScrollTop(this))

// console.log("getClientHeight:",that.getClientHeight(this))

that.y = that.getScrollHeight(list) - that.getScrollTop(this) - that.getClientHeight(this);

// 滾動觸發touchmove事件

that.touchmoveHandle();

// 觸底touchend事件

if(that.y <= 10) {

//這里向后臺進行數據請求(第一頁數據就是1，第二頁就是2，然后將請求回來的數組(處理成數組)拼接起來)

console.log("到底了！！")

// addLi();

// 觸發滾動結束事件

that.touchendHandle();

}

}

},false);

// 滑動結束

article.addEventListener('touchend',function(event){

// 若'touchend'時，ul偏移,用setInterval循環恢復ul的偏移量

// 距離刷新有個20的距離

if(list.offsetTop>=20) {

refreshText.innerHTML = "加載中...";

// 若恢復時'refresh===true',刷新頁面

if(refresh){

// 設置刷新

refreshDom.style.position = "static"; // 站位

list.style.top = 0;

setTimeout(() => {

location.reload();

}, 2000);

}

}

},false);

}

// 事件觸發

BScroll.prototype.trigger = function (type) {

var events = this._events[type];

if (!events) {

return;

}

var len = events.length;

var eventsCopy = [].concat(toConsumableArray(events));

for (var i = 0; i < len; i++) {

var event = eventsCopy[i];

// console.log("event:",event)

var fn = event[0],

context = event[1];

if (fn) {

fn.apply(context, [].slice.call(arguments, 1));

}

}

};

// 初始化工作

eventMixin(BScroll);

let scroll = new BScroll(article,{}) // 創建實例

// 監聽滾動到底

scroll.on("touchend",(pos)=>{

// 繼續加載更多

if(!finish ){

// 正在加載

if(loading){

return false;

}

loadingDom.style.display = "block";

addLi(); // 加載第二頁數據

}else{

// 已記載完成

loadingDom.style.display = "block";

loadingDom.querySelector(".text").innerHTML = "已經到底了~"

}

})

總結

以上是生活随笔為你收集整理的Java txt 下拉刷新_手写上拉加载，下拉刷新（小demo）的全部內容，希望文章能夠幫你解決所遇到的問題。

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