移動端上拉和下拉重新整理程式碼例項

admin發表於2017-02-19
分享一段程式碼例項，它實現了移動端上拉和下拉重新整理頁面功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>下拉重新整理，滾動翻頁</title>
<style>
li {
  border: 1px solid #dfdfdf;
  height: 50px;
  position: relative;
  width: 140%;
}
li div {
  width: 30%;
  height: 30px;
  float: right;
}
</style>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(window).scroll(function() {　
    var scrollTop = $(this).scrollTop(); //滾動條距離頂部的高度
    var scrollHeight = $(document).height(); //當前頁面的總高度
    var clientHeight = $(this).height(); //當前可視的頁面高度
    if (scrollTop + clientHeight >= scrollHeight) { //距離頂部+當前高度 >=文件總高度 即代表滑動到底部
      alert("上拉載入，要在這呼叫啥方法？");
    } else if (scrollTop <= 0) { //滾動條距離頂部的高度小於等於0
      alert("下拉重新整理，要在這呼叫啥方法？");
    }
  });
  var obj;
  var startx;
  var starty;
  var overx;
  var overy;
  for (var i = 1; i <= $("li").length; i++) { //為每個li標籤新增事件
    obj = document.getElementById(i); //獲取this元素
    evenlistener(obj); //呼叫evenlistener函式並將dom元素傳入，為該元素繫結事件
  }
  function evenlistener(obj) {
    obj.addEventListener("touchstart", function(event) { //touchstart事件,當滑鼠點選螢幕時觸發
      startx = event.touches[0].clientX; //獲取當前點選位置x座標
      starty = event.touches[0].clientY; //獲取當前點選位置y座標
      $(".sdf").text("x:" + startx + ",y:" + starty + "") //賦值到頁面顯示
    }, false); //false引數,設定事件處理機制的優先順序，具體不多說，true優先false
    obj.addEventListener('touchmove', function(event) { //touchmove事件,當滑鼠在螢幕移動時觸發
      overx = event.touches[0].clientX; //獲取當前點選位置x座標
      overy = event.touches[0].clientY; //獲取當前點選位置y座標
      var $this = $(this); //將dom物件轉化為jq物件，由於專案用到jquery，直接使用其animate方法
 
      if (startx - overx > 10) {
        console.log(startx);
        242
        console.log(overx);
        223
        //左滑動判斷，當左滑動的距離大於開始的距離10進入
        $($this).animate({
          marginLeft: "-55px"
        }, 150); //實現左滑動效果
      } else if (overx - startx > 10) { //右滑動判斷，當右滑動的距離大於開始的距離10進入
        $($this).animate({
          marginLeft: "0px"
        }, 150); //恢復
      }
    }, false);
    //touchend事件,當滑鼠離開螢幕時觸發，專案中無用到，舉例
    obj.addEventListener('touchend', function(event) { 
      $(".sf").text("x:" + overx + ",y:" + overy + "")
    }, false);
  }
});
</script>
</head>
<body>
  <div style="height:1000px;overflow-x:hidden;">
    <p class="sdf">x:,y:</p>
    <p class="sf">x:,y:</p>
    <div class="2">
      <li id="1"><div style="background-color:red;"></div></li>
      <li id="2"><div style="background-color:blue;"></div></li>
      <li id="3"><div style="background-color:green;"></div></li>
      <li id="4"><div style="background-color:black;"></div></li>
      <li id="5"><div style="background-color:gray;"></div></li>
    </div>
  </div>
</body>
</html>

相關文章