上拉載入下拉重新整理了解下

2021-09-27 08:53:27 字數 1741 閱讀 1455

老樣子,我們先,哦不,今天我們直接上思路,沒有效果圖,真的沒有

我們依舊從介面及邏輯兩塊進行分析

1.介面上,只分成簡單的兩塊,一塊是上方的重新整理文字,一塊是下方的內容,然後將上方提示內容隱藏在螢幕之外,一般由兩種方式,一種是上面遮一層,另一種是margintop:負值將其弄出螢幕外,這裡我採用的是第一種,**也很簡單,就隨便貼一下

.header

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) 

refreshtouchmove(e) }}

},refreshtouchend() 

let that = this;

if (this.movedistance > 50) ).then(() => ).catch(() => );

}}, 1);//通過乙個promise,讓資料更新結束後再進行介面變化。也可以採用其他的方式,如async await方式

} else 

}resetbox() , 1)

}this.movedistance = 0;}}

核心**就這些了,撒花完結,優化什麼的,你們自己看著來咯,大佬別打我,效果圖來了嘛

我就是效果圖

這是我的github,歡迎大佬們猛戳,不定時更新

下拉重新整理上拉載入

implements ixlistviewlistener 在oncreat裡面寫的 下拉重新整理是否啟用 xlistview.setpullrefreshenable true 載入更多是否啟用 xlistview.setpullloadenable true xlistview重新整理和載入更多...

下拉重新整理上拉載入

下拉載入上拉重新整理 需求 看看包是否有錯 然後在布局中把listview 改為 xlistview檔名 在activity找到控制項 xlistview xlistview view.findviewbyid r.id.xlistview xlistview setpullloadenable t...

上拉載入 下拉重新整理

自動配置 pod afnetworking pod mjrefresh pod svprogresshud pod sdwebimage 首先 vc.h 中 property nonatomic assign int page 當前頁 vc.m property nonatomic strong n...