• 滚动加载更多


    <div class="list-loading"></div>

    .list-loading{
    1. vertical-alignmiddle;
    2. bottom: 0
    3. animation: spin 1s 
       
      linear 0s infinite;
    4. transition: all .5s 
       
      ease 0s;
    5. transition-property: height;
    6. transition-duration: .5s !important;
    7. position: relative;
    8. overflow: hidden;
    9.  0;
    10. height:0;
    11. margin: 0 auto;
    }

    function PullLoadDate(dom,option){

        this.dom = $(dom); // 最大的父容器
    this.wrapper = this.dom.find(option.wrapper); // 模板的容器
    this.template = $(option.template); // 模板的ID
    this.ajax = option.ajax; // 请求地址
    this.noData = option.noData; // 没数据的时候,让提示文字显示
    this.pending = false; // 是否加载完
    this.hasData = true; // 是否有数据
    this.pageNationInit = { // 初始
    pageSize:10,
    pageNo:1
    };

    this.pageNation = $.extend({},this.pageNationInit,option.pageNation);

    this.init = function(){
    this.pull();
    this.scroll();
    };
    this.templateInit = function(data){
    var templateInvitation = this.template.html();
    var templateInit = Template7.compile(templateInvitation);
    return templateInit(data);
    };
    this.pull = function(){
    if(!this.hasData || this.pending) return;
    this.pending = true;
    var self = this;
    $(".list-loading").addClass("active");
    this.dataInit(function(data){
    self.pageNation.pageNo++;
    var totalPage = Math.ceil(data.totalRow / self.pageNation.pageSize);
    if(self.pageNation.pageNo > totalPage){
    self. hasData = false;
    }
    var html = self.templateInit(data);
    self.wrapper.append(html);
    self.pending = false;
    $(".list-loading").removeClass("active");
    },function(){
    self.dom.find(self.noData).show();
    self.pending = false;
    $(".list-loading").removeClass("active");
    });

    };
    this.dataInit = function(success,error){
    var self = this;
    $.ajax({
    url:self.ajax,
    type:"post",
    data:{pagenation:JSON.stringify(self.pageNation)},
    success:function(res){
    if(res.list && res.list.length){
    success(res);
    }else{
    error();
    }
    },
    error:function(){
    if(typeof error == "function"){
    error();
    }
    }
    });

    };

    this.scroll = function(){
    var self = this;
    self.dom.scroll(function () {
    var pageScrollTop = this.scrollHeight - this.clientHeight;
    if (pageScrollTop - this.scrollTop < 2) {
    self.pull();
    }
    });
    };
    this.init();
    }
     
  • 相关阅读:
    3.0.35 platform 设备资源和数据
    老子《道德经》第六十三章
    linux spi 主机与外设分离思想
    3.0.35 platform 总线、设备与驱动
    Linux 内核SPI子系统架构
    C 显示一个字符的编码值
    JAVA高级特性--内部类
    Java面向对象----接口概念
    Java面向对象----抽象类
    Java面向对象----多态概念,对象上下转型
  • 原文地址:https://www.cnblogs.com/founderswitch/p/7212057.html
Copyright © 2020-2023  润新知