Java txt 下拉刷新_手写上拉加载，下拉刷新（小demo）
背景
使用過(guò)很多下拉刷新，上拉加載的插件，雖然也知道一點(diǎn)原理，但似乎一直不太完全能理解它，閑來(lái)無(wú)事，手寫(xiě)一個(gè)，感受下，借鑒了better-scroll的源碼，功能當(dāng)然相差甚遠(yuǎn)，也只是個(gè)簡(jiǎn)易版的實(shí)現(xiàn)，大概就這意思。
Documenthtml,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'), // 寫(xiě)著“加載更多”的元素
// 下拉刷新變量
refreshDom = document.getElementById("refresh"), // 刷新dom
refreshText = refreshDom.querySelector('.text'), // 寫(xiě)著“下拉刷新”的元素
start = null, // 輔助變量：觸摸開(kāi)始時(shí)，相對(duì)于文檔頂部的Y坐標(biāo)
refresh = false; // 輔助變量：是否刷新
let num = 11; // 要添加的li文本，可自定義
let finish = false; // 是否繼續(xù)加載
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; // 設(shè)置加載到最低了
loadingText.innerHTML = "已經(jīng)到底了~";
loading = false
},2000)
}
// 拷貝數(shù)組
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);
}
};
// 事件注冊(cè)
function eventMixin(BScroll) {
// 注冊(cè)事件
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, {})
* 參數(shù)1：滾動(dòng)外層dom
* 參數(shù)2：配置條件
*/
function BScroll(dom,{}){
let that = this;
this._events = {}; // init private custom events
this.x = 0; // 水平軸移動(dòng)距離(水平功能暫不考慮，目前只玩y軸)
this.y = 0; // 縱軸移動(dòng)距離
//獲取元素滾動(dòng)條卷曲的高度
this.getScrollTop = function(ele) {
return ele.scrollTop || 0;
}
//獲取當(dāng)前可視范圍的高度
this.getClientHeight = function(ele) {
return ele.clientHeight || 0;
}
//獲取文檔完整的高度
this.getScrollHeight = function(ele){
return ele.clientHeight || 0;
}
// 觸發(fā)touchmove事件
this.touchmoveHandle = function(){
this.trigger('touchmove',{
x: this.x,
y: this.y
})
}
// 觸發(fā)touchend事件
this.touchendHandle = function(){
this.trigger('touchend',{
x: this.x,
y: this.y
})
}
// 滑動(dòng)開(kāi)始
article.addEventListener('touchstart',function(event){
let touch = event.touches[0];
start = touch.pageY; // 輔助變量：觸摸開(kāi)始時(shí)，相對(duì)于文檔頂部的Y坐標(biāo)
},false);
// 監(jiān)聽(tīng)滑動(dòng)事件
article.addEventListener('touchmove',function(event){
// 下拉刷新
let touch = event.touches[0];
// console.log(article.scrollTop)
// 下拉
if(article.scrollTop<=0){
console.log("下拉")
// 如果ul列表到頂部，修改ul列表的偏移,顯示“下拉刷新”，并準(zhǔn)備觸發(fā)下拉刷新功能，可自定義
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偏移量過(guò)大,則修改文字,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);
// 滾動(dòng)觸發(fā)touchmove事件
that.touchmoveHandle();
// 觸底touchend事件
if(that.y <= 10) {
//這里向后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求(第一頁(yè)數(shù)據(jù)就是1，第二頁(yè)就是2，然后將請(qǐng)求回來(lái)的數(shù)組(處理成數(shù)組)拼接起來(lái))
console.log("到底了！！")
// addLi();
// 觸發(fā)滾動(dòng)結(jié)束事件
that.touchendHandle();
}
}
},false);
// 滑動(dòng)結(jié)束
article.addEventListener('touchend',function(event){
// 若'touchend'時(shí)，ul偏移,用setInterval循環(huán)恢復(fù)ul的偏移量
// 距離刷新有個(gè)20的距離
if(list.offsetTop>=20) {
refreshText.innerHTML = "加載中...";
// 若恢復(fù)時(shí)'refresh===true',刷新頁(yè)面
if(refresh){
// 設(shè)置刷新
refreshDom.style.position = "static"; // 站位
list.style.top = 0;
setTimeout(() => {
location.reload();
}, 2000);
}
}
},false);
}
// 事件觸發(fā)
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,{}) // 創(chuàng)建實(shí)例
// 監(jiān)聽(tīng)滾動(dòng)到底
scroll.on("touchend",(pos)=>{
// 繼續(xù)加載更多
if(!finish ){
// 正在加載
if(loading){
return false;
}
loadingDom.style.display = "block";
addLi(); // 加載第二頁(yè)數(shù)據(jù)
}else{
// 已記載完成
loadingDom.style.display = "block";
loadingDom.querySelector(".text").innerHTML = "已經(jīng)到底了~"
}
})
總結(jié)
以上是生活随笔為你收集整理的Java txt 下拉刷新_手写上拉加载，下拉刷新（小demo）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： php mysql主从延迟_如何解决主从
- 下一篇： java虚拟机起不来的原因,JVM理解其