摘要:樣式最外面的盒子設置中間盒子不設置高度,靠子盒子撐起。
實現上拉加載最普遍的方式就是監聽滾動條的滾動事件,而移動端的下拉刷新利用的是transform屬性來進行位移,那用下拉刷新的方式實現上拉加載怎么樣?
html結構
這里我們做了兩個主要的盒子,在兩個盒子內實現上拉加載。結構很簡單。
css樣式
* { margin: 0; padding: 0; } .main-box { background: skyblue; width: 100%; height: 300px; overflow: hidden; } .popup-box { width: 100%; } .item { width: 100%; line-height: 40px; text-align: center; padding: 20px; box-sizing: border-box; } .tips{ text-align: center; } #box2 { margin-top: 50px; }
最外面的盒子設置overflow: hidden;中間盒子不設置高度,靠子盒子item撐起。
js代碼
/*下拉加載*/ function tDscroll(obj) { this.key = true; //防止重復的請求 this.dom = obj.dom; //傳入的dom this.fn = obj.fn; //回調函數 this.outDom = this.dom.querySelector(".popup-box"); //獲取內容盒子 this.showHeight = dom.offsetHeight; //顯示的高度 this.actualHeight = this.outDom.offsetHeight; //獲取實際高度的內容 this.startY = 0; //起始點擊位置 this.changedY = 0; //手指移動的距離 this.originY = 0; //偏移量 var that = this; this.dom.addEventListener("touchstart",function (ev) { that.onStart(ev); }); this.dom.addEventListener("touchmove",function (ev) { that.onMove(ev); }); this.dom.addEventListener("touchend",function (ev) { that.onEnd(ev); }); this.fn.call(this,this.outDom); }; tDscroll.prototype.onStart = function (ev) { this.startY = ev.targetTouches[0].clientY; var tempArr = window.getComputedStyle(this.outDom).transform.split(","); if (tempArr.length > 2) { this.originY = parseInt(tempArr[tempArr.length - 1]) || 0; } }; tDscroll.prototype.onMove = function (ev) { this.changedY = ev.touches[0].clientY - this.startY; var changNum = (this.originY + this.changedY); var scrollHeight = -changNum + this.showHeight; if (changNum > 50)return; if (scrollHeight > this.actualHeight + 50)return; if (scrollHeight > this.actualHeight - 50 && this.key) { this.fn.call(this,this.outDom); } this.outDom.style.cssText = "transform: translateY(" + changNum + "px);"; }; tDscroll.prototype.onEnd = function() { if ((this.originY + this.changedY) > 50 ) { this.outDom.style.cssText = "transform: translateY(0px);transition:all .3s"; } if (-(this.originY + this.changedY) + this.showHeight > this.actualHeight + 50) { this.outDom.style.cssText = "transform: translateY(-"+(this.actualHeight - this.showHeight)+"px);transition:all .3s"; } }; var dom = document.querySelector("#box1"); //獲取dom var dom2 = document.querySelector("#box2"); //獲取dom var obj = { dom : dom, fn : add }; var obj2 = { dom : dom2, fn : add }; new tDscroll(obj); new tDscroll(obj2); var page = 0; //當前的頁數(模擬用) // 模擬ajax function add(outDom) { var that = this; this.key = false; var str = ""; for (var i = 1;i < 11;i++) { str+=""+(i+((page)*10))+"" } page++; setTimeout(function () { var tips = outDom.querySelector(".tips"); //獲取提升 tips && outDom.removeChild(tips); //如果不是第一次 添加 str += "加載更多"; outDom.innerHTML += str; that.actualHeight = outDom.offsetHeight; that.key = true; },2000) }
原理也是很簡單,監聽手勢事件判斷是否距離足夠,足夠就可以添加數據啦~~~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/117028.html
摘要:樣式最外面的盒子設置中間盒子不設置高度,靠子盒子撐起。 實現上拉加載最普遍的方式就是監聽滾動條的滾動事件,而移動端的下拉刷新利用的是transform屬性來進行位移,那用下拉刷新的方式實現上拉加載怎么樣? html結構 這里我們做了兩個主要的盒子,在兩個盒子內實現上拉加載。結構很簡單。 css樣式 * { ...
摘要:樣式最外面的盒子設置中間盒子不設置高度,靠子盒子撐起。 實現上拉加載最普遍的方式就是監聽滾動條的滾動事件,而移動端的下拉刷新利用的是transform屬性來進行位移,那用下拉刷新的方式實現上拉加載怎么樣? html結構 這里我們做了兩個主要的盒子,在兩個盒子內實現上拉加載。結構很簡單。 css樣式 * { ...
摘要:是一個移動端的上拉下拉加載更多的組件。因為在節點元素創建之前,必須先設定高度,否則會導致無法滾動創建完畢是指定給第一個子元素滾動,所以的上拉和下拉刷新也是追加到第一個子元素里面,其實把第一個子元素想象成為里面的就可以了。 listloading.js listloading是一個移動端的上拉、下拉加載更多的組件。主要依賴于iscroll.js v5.1.2基礎上開發的組件,基礎庫可以使...
閱讀 1496·2023-04-26 01:28
閱讀 3314·2021-11-22 13:53
閱讀 1420·2021-09-04 16:40
閱讀 3189·2019-08-30 15:55
閱讀 2677·2019-08-30 15:54
閱讀 2489·2019-08-30 13:47
閱讀 3365·2019-08-30 11:27
閱讀 1145·2019-08-29 13:21