欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动端如何用下拉刷新的方式实现上拉加载

程序员文章站 2022-03-13 17:10:53
实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样? html结构...

实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是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)
  }

原理也是很简单,监听手势事件判断是否距离足够,足够就可以添加数据啦~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。