欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript下拉刷新的簡單實(shí)現(xiàn)

 更新時(shí)間：2017年02月14日 10:10:56   作者：moumou0213  
這篇文章主要為大家詳細(xì)介紹了Javascript下拉刷新的簡單實(shí)現(xiàn)過程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Javascript下拉刷新的簡單實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

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 style="background-color: beige;">
  <div id="container" style="width:100%;border:solid 1px blue; transform:translate(0px,-61px)">
   <div style="height:50px; line-height:50px; text-align:center; width:100%; border:solid 1px red;">
    努力加載中...
   </div> 
   <div style="width:100%; line-height:30px;background-color:#F2F2F2; font-size:17px; font-family:'Adobe Garamond Pro'">
    下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新
    下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新
    下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉刷新下拉拉刷新下拉刷新
   </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ù)滑動軌跡動態(tài)調(diào)整滑塊位置（transfrom=>translate）；

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

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

大致思路：

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

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

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

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

上代碼：

/*
 *obj--滑動對象
 *offset--滑動距離（當(dāng)滑動距離大于等于offset時(shí)將調(diào)用callback）
 *callback--滑動完成后的回調(diào)函數(shù)
 */
 var slide = function (obj, offset, callback) {
  var start,
   end,
   isLock = false,//是否鎖定整個(gè)操作
   isCanDo = false,//是否移動滑塊
   isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
   hasTouch = 'ontouchstart' in window && !isTouchPad;
  //將對象轉(zhuǎn)換為jquery的對象
  obj = $(obj);
  var objparent = obj.parent();
  /*操作方法*/
  var fn =
   {
    //移動容器
    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)識操作完成
     isLock = false;
    }
   };
  //滑動開始
  obj.bind("touchstart", function (e) {
   if (objparent.scrollTop() <= 0 && !isLock) {
    var even = typeof event == "undefined" ? e : event;
    //標(biāo)識操作進(jìn)行中
    isLock = true;
    isCanDo = true;
    //保存當(dāng)前鼠標(biāo)Y坐標(biāo)
    start = hasTouch ? even.touches[0].pageY : even.pageY;
    //消除滑塊動畫時(shí)間
    fn.setTranslition(0);
   }
  });
  //滑動中
  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();
     //消除滑塊動畫時(shí)間
     fn.setTranslition(0);
     //移動滑塊
     fn.translate(end - start - offset);
    }
   }
  });
  //滑動結(jié)束
  obj.bind("touchend", function (e) {
   if (isCanDo) {
    isCanDo = false;
    //判斷滑動距離是否大于等于指定值
    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，要滑動的對象；offset，提示部分的transform的值（ 代碼中是 transform:translate(0px,-61px) ，那么這里就是61 ）；callback，回調(diào)函數(shù)，在下拉完成后調(diào)用的函數(shù)（ 頁面刷新或數(shù)據(jù)加載 ）。

2、為什么是transform不是margin？

因?yàn)閠ransform不會引起重繪，相比margin更流暢，性能更好。但是transfrom有個(gè)比較好玩的地方，如果translateY的值為負(fù)數(shù) （當(dāng)前元素上移xx像素） 下方元素不會跟著上移 （margin會上移） ,在這點(diǎn)上它和margin是有區(qū)別的 。 注意，這里的-webkit-transform的存在是有必要的，因?yàn)橛行g覽器識別不了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的目的是在于滑動結(jié)束后 （手指離開屏幕） 為滑塊回彈添加過渡效果，這樣看上去就不會那么突兀。當(dāng)然，這個(gè)過渡效果同樣會應(yīng)用到數(shù)據(jù)加載完成后提示部分的隱藏上。設(shè)置為0是為了取消在滑動過程中的滑塊過渡效果，我們手指往下滑動的時(shí)候，滑塊會跟這向下移動，這樣就有了滑動滑塊的效果。如果這個(gè)時(shí)候不取消transition就會出現(xiàn)滑塊抖動的效果 （嘿嘿，有興趣的話可以試試這種感覺。） 。整個(gè)過程中transition是相當(dāng)重要的。

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

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

5、如何使用？

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論