中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

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

移動端開發之怎么用下拉刷新的方式實現上拉加載

發布時間:2021-02-07 10:52:58 來源:億速云 閱讀:240 作者:小新 欄目:web開發

這篇文章給大家分享的是有關移動端開發之怎么用下拉刷新的方式實現上拉加載的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

實現上拉加載最普遍的方式就是監聽滾動條的滾動事件,而移動端的下拉刷新利用的是transform屬性來進行位移,那用下拉刷新的方式實現上拉加載怎么樣?

html結構

<div class="main-box" id="box1">
  <div class="popup-box">
  </div>
</div>
<div class="main-box" id="box2">
  <div class="popup-box">
  </div>
</div>

這里我們做了兩個主要的盒子,在兩個盒子內實現上拉加載。結構很簡單。

css樣式

* {
      margin: 0;
      padding: 0;
    }
    .main-box {
      background: skyblue;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .popup-box {
      width: 100%;
    }
    .item {
      width: 100%;
      line-height: 40px;
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .tips{
      text-align: center;
    }
    #box2 {
      margin-top: 50px;
    }

最外面的盒子設置overflow: hidden;中間盒子不設置高度,靠子盒子item撐起。

js代碼

  /*下拉加載*/
  function tDscroll(obj) {
    this.key = true;         //防止重復的請求
    this.dom = obj.dom;        //傳入的dom
    this.fn = obj.fn;         //回調函數
    this.outDom = this.dom.querySelector(".popup-box"); //獲取內容盒子
    this.showHeight = dom.offsetHeight;         //顯示的高度
    this.actualHeight = this.outDom.offsetHeight;       //獲取實際高度的內容
    this.startY = 0;                //起始點擊位置
    this.changedY = 0;               //手指移動的距離
    this.originY = 0;               //偏移量
    var that = this;
    this.dom.addEventListener("touchstart",function (ev) {
      that.onStart(ev);
    });
    this.dom.addEventListener("touchmove",function (ev) {
      that.onMove(ev);
    });
    this.dom.addEventListener("touchend",function (ev) {
      that.onEnd(ev);
    });
    this.fn.call(this,this.outDom);
  };

  tDscroll.prototype.onStart = function (ev) {
    this.startY = ev.targetTouches[0].clientY;
    var tempArr = window.getComputedStyle(this.outDom).transform.split(",");
    if (tempArr.length > 2) {
      this.originY = parseInt(tempArr[tempArr.length - 1]) || 0;
    }
  };

  tDscroll.prototype.onMove = function (ev) {
    this.changedY = ev.touches[0].clientY - this.startY;
    var changNum = (this.originY + this.changedY);
    var scrollHeight = -changNum + this.showHeight;
    if (changNum > 50)return;
    if (scrollHeight > this.actualHeight + 50)return;
    if (scrollHeight > this.actualHeight - 50 && this.key) {
      this.fn.call(this,this.outDom);
    }
    this.outDom.style.cssText = "transform: translateY(" + changNum + "px);";
  };

  tDscroll.prototype.onEnd = function() {
    if ((this.originY + this.changedY) > 50 ) {
      this.outDom.style.cssText = "transform: translateY(0px);transition:all .3s";
    }
    if (-(this.originY + this.changedY) + this.showHeight > this.actualHeight + 50) {
      this.outDom.style.cssText = "transform: translateY(-"+(this.actualHeight - this.showHeight)+"px);transition:all .3s";
    }
  };


  var dom = document.querySelector("#box1");  //獲取dom
  var dom2 = document.querySelector("#box2");  //獲取dom
  var obj = {
    dom : dom,
    fn : add
  };
  var obj2 = {
    dom : dom2,
    fn : add
  };
  new tDscroll(obj);
  new tDscroll(obj2);
  var page = 0;          //當前的頁數(模擬用)

  // 模擬ajax
  function add(outDom) {
    var that = this;
    this.key = false;
    var str = "";
    for (var i = 1;i < 11;i++) {
      str+="<div class='item'>"+(i+((page)*10))+"</div>"
    }
    page++;
    setTimeout(function () {
      var tips = outDom.querySelector(".tips");       //獲取提升
      tips && outDom.removeChild(tips); //如果不是第一次 添加
      str += "<div class='tips'>加載更多</div>";
      outDom.innerHTML += str;
      that.actualHeight = outDom.offsetHeight;
      that.key = true;
    },2000)
  }

原理也是很簡單,監聽手勢事件判斷是否距離足夠,足夠就可以添加數據啦~~~

感謝各位的閱讀!關于“移動端開發之怎么用下拉刷新的方式實現上拉加載”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

宜君县| 崇左市| 邢台市| 卢湾区| 四子王旗| 米林县| 德州市| 杨浦区| 元阳县| 龙岩市| 大荔县| 通州区| 柳江县| 中西区| 宿州市| 百色市| 松潘县| 太白县| 囊谦县| 托里县| 北京市| 麻阳| 库伦旗| 青田县| 深泽县| 瑞安市| 牡丹江市| 泗水县| 疏附县| 金阳县| 海门市| 海晏县| 岳阳县| 鹿泉市| 清丰县| 玉田县| 高唐县| 九龙城区| 绥芬河市| 上饶县| 临汾市|