摘要:最近在做手機(jī)端,發(fā)現(xiàn)下拉刷新和上拉加載的控件很少而且自我感覺(jué)不好用,比如之類然后自己寫(xiě)了個(gè)懶加載的,也很簡(jiǎn)單,最基礎(chǔ)的代碼不喜勿噴,但蠻實(shí)用的手機(jī)端懶加載分頁(yè)用之前先引用下這里的表示距離底部像素觸發(fā),可自行調(diào)節(jié)第頁(yè)這里放你的分頁(yè)代碼這是刷
最近在做手機(jī)端,發(fā)現(xiàn)下拉刷新和上拉加載的jq控件很少而且自我感覺(jué)不好用,比如iscroll之類……
然后自己寫(xiě)了個(gè)懶加載的,也很簡(jiǎn)單,最基礎(chǔ)的代碼【不喜勿噴,但蠻實(shí)用的】
wap手機(jī)端懶加載分頁(yè):
用之前先引用下jquery.js
var current = 1; $(function() { $("body").bind("touchmove", function(e) { if($(this).scrollTop() > ($(window).height() * current - 150)) {//這里的150表示距離底部150像素觸發(fā),可自行調(diào)節(jié) current++; console.log("第" + current + "頁(yè)"); //這里放你的分頁(yè)代碼 } }); });
if($(this).scrollTop()==0){//這是wap刷新代碼,有需要請(qǐng)結(jié)合使用}
web電腦端懶加載分頁(yè):
用之前先引用下jquery.js
var current = 1; $(function() { window.onscroll = function() { if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150與wap手機(jī)端一樣 current++; //這里放你的分頁(yè)代碼 } } });
if($(document).scrollTop()==0){//這是web刷新代碼,有需要請(qǐng)結(jié)合使用}
web電腦端footer底部固定:
.footer.position { position: absolute; bottom: 0; }
$(function() { auto(); window.onresize = function() { auto(); } }); function auto() { if($(window).height() > 917) {//917可自行調(diào)整,根據(jù)頁(yè)面的內(nèi)容高度 $(".footer").addClass("position"); } else {//.position見(jiàn)css $(".footer").removeClass("position"); } }
另一種方法【推薦】
function auto() { $("body").scrollTop(1); //控制滾動(dòng)條下移1px if($("body").scrollTop() > 0) { $(".footer").removeClass("position"); alert("有滾動(dòng)條"); } else { $(".footer").addClass("position"); alert("沒(méi)有滾動(dòng)條"); } $("body").scrollTop(0); //滾動(dòng)條返回頂部 }
附上兩張前后對(duì)比圖,footer固定底部
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/81224.html
摘要:最近在做手機(jī)端,發(fā)現(xiàn)下拉刷新和上拉加載的控件很少而且自我感覺(jué)不好用,比如之類然后自己寫(xiě)了個(gè)懶加載的,也很簡(jiǎn)單,最基礎(chǔ)的代碼不喜勿噴,但蠻實(shí)用的手機(jī)端懶加載分頁(yè)用之前先引用下這里的表示距離底部像素觸發(fā),可自行調(diào)節(jié)第頁(yè)這里放你的分頁(yè)代碼這是刷 最近在做手機(jī)端,發(fā)現(xiàn)下拉刷新和上拉加載的jq控件很少而且自我感覺(jué)不好用,比如iscroll之類…… 然后自己寫(xiě)了個(gè)懶加載的,也很簡(jiǎn)單,最基礎(chǔ)的代碼【...
摘要:小蘿卜滬江前端開(kāi)發(fā)工程師本文原創(chuàng)翻譯,有不當(dāng)?shù)牡胤綒g迎指出。簡(jiǎn)稱就非常擅長(zhǎng)做這些,事實(shí)這也是它們的宗旨。通過(guò)它精心設(shè)計(jì)的規(guī)則能保證優(yōu)先顯示頁(yè)面的主要內(nèi)容。原創(chuàng)新書(shū)移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。 小蘿卜(滬江前端開(kāi)發(fā)工程師)本文原創(chuàng)翻譯,有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請(qǐng)指明出處。 如果你在過(guò)去幾個(gè)月一直關(guān)注web開(kāi)發(fā)社區(qū),你很可能已經(jīng)閱讀了 progressive web ap...
摘要:屬性值則依賴于我們需要?jiǎng)?chuàng)建什么樣的漸變背景,例如線性漸變或放射性漸變。我們會(huì)在線性漸變中介紹不同種類的供應(yīng)商前綴,但為了簡(jiǎn)便起見(jiàn),放射性漸變中我們不會(huì)再提及。線性漸變多年來(lái),設(shè)計(jì)師和開(kāi)發(fā)者們都是通過(guò)切圖來(lái)實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺(jué),設(shè)置分組,分配優(yōu)先級(jí),對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中,元素的背景可以是一個(gè)純色,一張圖,一個(gè)漸變...
摘要:屬性值則依賴于我們需要?jiǎng)?chuàng)建什么樣的漸變背景,例如線性漸變或放射性漸變。我們會(huì)在線性漸變中介紹不同種類的供應(yīng)商前綴,但為了簡(jiǎn)便起見(jiàn),放射性漸變中我們不會(huì)再提及。線性漸變多年來(lái),設(shè)計(jì)師和開(kāi)發(fā)者們都是通過(guò)切圖來(lái)實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺(jué),設(shè)置分組,分配優(yōu)先級(jí),對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中,元素的背景可以是一個(gè)純色,一張圖,一個(gè)漸變...
摘要:屬性值則依賴于我們需要?jiǎng)?chuàng)建什么樣的漸變背景,例如線性漸變或放射性漸變。我們會(huì)在線性漸變中介紹不同種類的供應(yīng)商前綴,但為了簡(jiǎn)便起見(jiàn),放射性漸變中我們不會(huì)再提及。線性漸變多年來(lái),設(shè)計(jì)師和開(kāi)發(fā)者們都是通過(guò)切圖來(lái)實(shí)現(xiàn)漸變背景。 背景對(duì)網(wǎng)站的設(shè)計(jì)有重大的影響。它有利于建立網(wǎng)站的整體感覺(jué),設(shè)置分組,分配優(yōu)先級(jí),對(duì)網(wǎng)站的可用性也有相當(dāng)大的影響。 在CSS中,元素的背景可以是一個(gè)純色,一張圖,一個(gè)漸變...
閱讀 3457·2021-11-17 17:00
閱讀 3818·2021-08-09 13:46
閱讀 2866·2019-08-30 15:54
閱讀 627·2019-08-30 13:54
閱讀 2945·2019-08-29 17:13
閱讀 3219·2019-08-29 14:00
閱讀 2975·2019-08-29 11:11
閱讀 1379·2019-08-26 10:15