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

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

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

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

Html相關代碼

<!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ù)加載）。

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

大致思路：

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

1、當鼠標左鍵按下（移動設備上的touchstart事件）的時候記錄下當前鼠標位置的 Y軸坐標；

2、當鼠標移動的時候（touchmove事件），記錄下鼠標的Y 軸坐標判斷滑動軌跡并進行相應的滑塊移動；

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

上代碼：

/*
 *obj--滑動對象
 *offset--滑動距離（當滑動距離大于等于offset時將調(diào)用callback）
 *callback--滑動完成后的回調(diào)函數(shù)
 */
 var slide = function (obj, offset, callback) {
  var start,
   end,
   isLock = false,//是否鎖定整個操作
   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)"
     });
    },
    //設置效果時間
    setTranslition: function (time) {
     obj.css({
      "-webkit-transition": "all " + time + "s",
      "transition": "all " + time + "s"
     });
    },
    //返回到初始位置
    back: function () {
     fn.translate(0 - offset);
     //標識操作完成
     isLock = false;
    }
   };
  //滑動開始
  obj.bind("touchstart", function (e) {
   if (objparent.scrollTop() <= 0 && !isLock) {
    var even = typeof event == "undefined" ? e : event;
    //標識操作進行中
    isLock = true;
    isCanDo = true;
    //保存當前鼠標Y坐標
    start = hasTouch ? even.touches[0].pageY : even.pageY;
    //消除滑塊動畫時間
    fn.setTranslition(0);
   }
  });
  //滑動中
  obj.bind("touchmove", function (e) {
   if (objparent.scrollTop() <= 0 && isCanDo) {
    var even = typeof event == "undefined" ? e : event;
    //保存當前鼠標Y坐標
    end = hasTouch ? even.touches[0].pageY : even.pageY;
    if (start < end) {
     even.preventDefault();
     //消除滑塊動畫時間
     fn.setTranslition(0);
     //移動滑塊
     fn.translate(end - start - offset);
    }
   }
  });
  //滑動結束
  obj.bind("touchend", function (e) {
   if (isCanDo) {
    isCanDo = false;
    //判斷滑動距離是否大于等于指定值
    if (end - start >= offset) {
     //設置滑塊回彈時間
     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？

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

3、關于transition設置為0s。

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

4、關于isLock和isCanDo.

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

5、如何使用？

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

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

相關文章

最新評論