zoukankan      html  css  js  c++  java
  • 移动端用下拉刷新的方式实现上拉加载

    实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是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;
                 100%;
                height: 300px;
                overflow: hidden;
            }
            .popup-box {
                 100%;
            }
            .item {
                 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)
        }
    

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

  • 相关阅读:
    消息队列在VB.NET数据库开发中的应用
    PO: Tips and useful Query
    PO 收料SQL
    计划采购订单
    检查订单是否有退货
    采购订单关闭之PL/SQL实现方法
    库存核心业务(库存管理 库存事务处理)
    采购管理核心流程
    Oracle EBS: 获取PO审批人名字
    ORACLE EBS AP发票到付款的数据流
  • 原文地址:https://www.cnblogs.com/lovellll/p/10093871.html
Copyright © 2011-2022 走看看