zoukankan      html  css  js  c++  java
  • 滚动加载更多

    <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();
    }
     
  • 相关阅读:
    sleuth使用说明(入门)
    git学习
    rancher中级(二)(rancher中添加证书及操作虚拟主机)
    rancher中级(一)(rancher的存储,网络)
    rancher初级(搭建+基本操作+web应用部署)
    Docker学习笔记
    面试-框架篇
    面试-核心篇
    面试-基础篇
    「译」JUnit 5 系列:扩展模型(Extension Model)
  • 原文地址:https://www.cnblogs.com/founderswitch/p/7212057.html
Copyright © 2011-2022 走看看