溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Javascript如何實(shí)現(xiàn)下拉刷新功能

發(fā)布時(shí)間：2021-07-06 11:28:52 來源：億速云 閱讀：191 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)Javascript如何實(shí)現(xiàn)下拉刷新功能，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

Html相關(guān)代碼

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>
 <body >
  <div id="container" >
   <div >
    努力加載中...
   </div> 
   <div >
    下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新
    下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新
    下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉拉刷新下拉刷新
   </div>
  </div>
 </body>
</html>
<!--JQuery是那么的好用，這種情況下怎么能沒有它呢！-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

JavaScript該做什么呢？ 

1、根據(jù)滑動(dòng)軌跡動(dòng)態(tài)調(diào)整滑塊位置（transfrom=>translate）；

2、根據(jù)滑動(dòng)的距離判斷是否執(zhí)行刷新（或數(shù)據(jù)加載）。

當(dāng)然，如果滑動(dòng)結(jié)束后使用ajax重新加載頁面數(shù)據(jù)，還將涉及到一個(gè)頁面向上滑動(dòng)并隱藏提示部分的效果。

大致思路：

(前提條件：當(dāng)前元素已滑動(dòng)至頂部)

1、當(dāng)鼠標(biāo)左鍵按下（移動(dòng)設(shè)備上的touchstart事件）的時(shí)候記錄下當(dāng)前鼠標(biāo)位置的 Y軸坐標(biāo)；

2、當(dāng)鼠標(biāo)移動(dòng)的時(shí)候（touchmove事件），記錄下鼠標(biāo)的Y 軸坐標(biāo)判斷滑動(dòng)軌跡并進(jìn)行相應(yīng)的滑塊移動(dòng)；

3、當(dāng)鼠標(biāo)左鍵松開（touchend事件）的時(shí)候，通過對比鼠標(biāo)開始和結(jié)束的Y軸坐標(biāo)的距離判斷是否應(yīng)該刷新頁面（或重新加載數(shù)據(jù)）。

上代碼：

/*
 *obj--滑動(dòng)對象
 *offset--滑動(dòng)距離（當(dāng)滑動(dòng)距離大于等于offset時(shí)將調(diào)用callback）
 *callback--滑動(dòng)完成后的回調(diào)函數(shù)
 */
 var slide = function (obj, offset, callback) {
  var start,
   end,
   isLock = false,//是否鎖定整個(gè)操作
   isCanDo = false,//是否移動(dòng)滑塊
   isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
   hasTouch = 'ontouchstart' in window && !isTouchPad;
  //將對象轉(zhuǎn)換為jquery的對象
  obj = $(obj);
  var objparent = obj.parent();
  /*操作方法*/
  var fn =
   {
    //移動(dòng)容器
    translate: function (diff) {
     obj.css({
      "-webkit-transform": "translate(0," + diff + "px)",
      "transform": "translate(0," + diff + "px)"
     });
    },
    //設(shè)置效果時(shí)間
    setTranslition: function (time) {
     obj.css({
      "-webkit-transition": "all " + time + "s",
      "transition": "all " + time + "s"
     });
    },
    //返回到初始位置
    back: function () {
     fn.translate(0 - offset);
     //標(biāo)識(shí)操作完成
     isLock = false;
    }
   };
  //滑動(dòng)開始
  obj.bind("touchstart", function (e) {
   if (objparent.scrollTop() <= 0 && !isLock) {
    var even = typeof event == "undefined" ? e : event;
    //標(biāo)識(shí)操作進(jìn)行中
    isLock = true;
    isCanDo = true;
    //保存當(dāng)前鼠標(biāo)Y坐標(biāo)
    start = hasTouch ? even.touches[0].pageY : even.pageY;
    //消除滑塊動(dòng)畫時(shí)間
    fn.setTranslition(0);
   }
  });
  //滑動(dòng)中
  obj.bind("touchmove", function (e) {
   if (objparent.scrollTop() <= 0 && isCanDo) {
    var even = typeof event == "undefined" ? e : event;
    //保存當(dāng)前鼠標(biāo)Y坐標(biāo)
    end = hasTouch ? even.touches[0].pageY : even.pageY;
    if (start < end) {
     even.preventDefault();
     //消除滑塊動(dòng)畫時(shí)間
     fn.setTranslition(0);
     //移動(dòng)滑塊
     fn.translate(end - start - offset);
    }
   }
  });
  //滑動(dòng)結(jié)束
  obj.bind("touchend", function (e) {
   if (isCanDo) {
    isCanDo = false;
    //判斷滑動(dòng)距離是否大于等于指定值
    if (end - start >= offset) {
     //設(shè)置滑塊回彈時(shí)間
     fn.setTranslition(1);
     //保留提示部分
     fn.translate(0);
     //執(zhí)行回調(diào)函數(shù)
     if (typeof callback == "function") {
      callback.call(fn, e);
     }
    } else {
     //返回初始狀態(tài)
     fn.back();
    }
   }
  });
 }

代碼分析：

1、參數(shù)：obj，要滑動(dòng)的對象；offset，提示部分的transform的值（ 代碼中是 transform:translate(0px,-61px) ，那么這里就是61 ）；callback，回調(diào)函數(shù)，在下拉完成后調(diào)用的函數(shù)（ 頁面刷新或數(shù)據(jù)加載 ）。

2、為什么是transform不是margin？

因?yàn)閠ransform不會(huì)引起重繪，相比margin更流暢，性能更好。但是transfrom有個(gè)比較好玩的地方，如果translateY的值為負(fù)數(shù) （當(dāng)前元素上移xx像素） 下方元素不會(huì)跟著上移 （margin會(huì)上移） ,在這點(diǎn)上它和margin是有區(qū)別的 。 注意，這里的-webkit-transform的存在是有必要的，因?yàn)橛行g覽器識(shí)別不了transform，比如微信內(nèi)置瀏覽 （我的手機(jī)上是這樣的） 。為了兼容性，多扣幾個(gè)字母是值得的。

3、關(guān)于transition設(shè)置為0s。

為什么要在touchstart的時(shí)候把transition的值設(shè)置為0秒呢？transition的作用是為元素屬性的變化添加過渡效果，例如一個(gè)框變大，我們設(shè)置為transition為1s，那么這個(gè)框就是在1s內(nèi)變大到指定大小。第一個(gè)參數(shù)表示設(shè)置過渡效果的 CSS 屬性的名稱 （如：margin，transform；all表示所有） ，第二個(gè)參數(shù)表示過渡的時(shí)間。 代碼中設(shè)置transition的目的是在于滑動(dòng)結(jié)束后 （手指離開屏幕） 為滑塊回彈添加過渡效果，這樣看上去就不會(huì)那么突兀。當(dāng)然，這個(gè)過渡效果同樣會(huì)應(yīng)用到數(shù)據(jù)加載完成后提示部分的隱藏上。設(shè)置為0是為了取消在滑動(dòng)過程中的滑塊過渡效果，我們手指往下滑動(dòng)的時(shí)候，滑塊會(huì)跟這向下移動(dòng)，這樣就有了滑動(dòng)滑塊的效果。如果這個(gè)時(shí)候不取消transition就會(huì)出現(xiàn)滑塊抖動(dòng)的效果 （嘿嘿，有興趣的話可以試試這種感覺。） 。整個(gè)過程中transition是相當(dāng)重要的。

4、關(guān)于isLock和isCanDo.

這兩個(gè)變量的作用在于防止二次滑動(dòng)，在第一次滑動(dòng)后數(shù)據(jù)加載完成之前不允許有第二次的滑動(dòng)。當(dāng)滑動(dòng)開始的時(shí)候講isLock和isCanDo都設(shè)置為True，表示允許后面兩個(gè)事件里的代碼可以正常運(yùn)行，當(dāng)滑動(dòng)結(jié)束后isCanDo設(shè)置為false表示在isLock被設(shè)置為True之前 （整個(gè)操作完成之前） 所有的事件代碼均不可用 （不執(zhí)行下拉數(shù)據(jù)加載等相關(guān)動(dòng)作） 。

5、如何使用？

$(function () {
 slide("#container", 61, function (e) {
  var that = this;
  setTimeout(function () {
   that.back.call();
  }, 2000);
 });
});

關(guān)于“Javascript如何實(shí)現(xiàn)下拉刷新功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手