原生JS下拉加載插件分享
使用方式:
new downUpData({url:"http://192.168.1.103:8080/test/ data.json",distance:20,callback:function(resp,config){ var oUl = document.getElementById('ul'); for(var i=0;i<resp.data.length;i+=1){ oUl.innerHTML+= '<li>'+ resp.data[i].title +'</li>'; } }}).isBottom();
默認(rèn)滾動(dòng)到底部會(huì)去請(qǐng)求ajax
參數(shù)說(shuō)明:
url:請(qǐng)求的數(shù)據(jù)地址,不支持跨域(必須)
distance:距離底部多遠(yuǎn)加載(可選參數(shù))
callback:當(dāng)滾動(dòng)到指定距離后請(qǐng)求完ajax將會(huì)觸發(fā)這個(gè)回調(diào)函數(shù),里面有兩個(gè)參數(shù),第一個(gè)為數(shù)據(jù)(以及轉(zhuǎn)成JSON對(duì)象了,用的是JSON.parse,可能低版本瀏覽器不支持這個(gè)方法),第二個(gè)參數(shù)為傳進(jìn)去的參數(shù),當(dāng)你需要重新改變請(qǐng)求信息的時(shí)候可以用這個(gè),比如說(shuō)你想做分頁(yè)效果,就需要改變url地址。
callback(name1,name2)
name1:data
name2:配置
源代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body,ul{ margin:0; padding:0; } </style> </head> <body> <ul id="ul"> </ul> <script> function downUpData(obj){ this.config = obj; }; downUpData.prototype = { // 判斷是否到達(dá)底部 isBottom:function(){ var _this = this; var scrollH = null, clientHeight = null; scrollTop = null; distance = this.config.distance||0; h = 0; function scroll(){ scrollH = document.body.scrollHeight||document.documentElement.scrollHeight; clientHeight = window.innerHeight; scrollTop = document.body.scrollTop||document.documentElement.scrollTop; h = clientHeight + scrollTop; if(h>=scrollH-distance){ _this.ajax(); } } scroll(); window.onscroll = function(){ scroll(); }; }, // 發(fā)送AJAX請(qǐng)求 ajax:function(){ var _this = this; var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("GET",this.config.url,true); xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ _this.config.callback(JSON.parse(xhr.responseText),_this.config); } } xhr.send(); } }; new downUpData({url:"http://192.168.1.103:8080/test/data.json",distance:20,callback:function(resp,config){ console.log(config) var oUl = document.getElementById('ul'); for(var i=0;i<resp.data.length;i+=1){ oUl.innerHTML+= '<li>'+ resp.data[i].title +'</li>'; } }}).isBottom(); </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)表格行變色的方法,涉及javascript表格節(jié)點(diǎn)樣式及鼠標(biāo)事件的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05javascript中字符串替換函數(shù)replace()方法與c# 、vb 替換有一點(diǎn)不同
JavaScript 不像和c# vb.net 中一樣 直接就可以替換所以的要替換的字符2010-06-06實(shí)例解析ES6 Proxy使用場(chǎng)景介紹
本篇文章主要介紹了ES6 Proxy使用場(chǎng)景介紹,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01JS中的public和private對(duì)象,即static修飾符
先看下面的例子,它將告訴我們?cè)贘S世界中也有C#里的public , private ,及static等2012-01-01uniapp實(shí)現(xiàn)tabs切換(可滑動(dòng))效果實(shí)例
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)tabs切換(可滑動(dòng))效果的相關(guān)資料,tabs切換無(wú)論是在app端還是小程序或者H5頁(yè)面都是很常見(jiàn)的功能,文中通過(guò)實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下2023-07-07javascript+HTML5自定義元素播放焦點(diǎn)圖動(dòng)畫(huà)
這篇文章主要介紹了javascript+HTML5自定義元素播放焦點(diǎn)圖動(dòng)畫(huà)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09根據(jù)當(dāng)前時(shí)間在jsp頁(yè)面上顯示上午或下午
這篇文章主要介紹了根據(jù)當(dāng)前時(shí)間不同在jsp頁(yè)面上顯示上午或下午,需要的朋友可以參考下2014-08-08