ITPub博客

首页 > 应用开发 > > 微信端页面的下拉刷新,兼容手机端和PC端

微信端页面的下拉刷新,兼容手机端和PC端

作者:hawkliu 时间:2019-08-16 09:41:42 0 删除 编辑

之前只弄过滚动条滚到底部自动加载下一页,引入了一个别人写的infinite.js

现在功能是要类似于QQ聊天那样的到达顶部触发加载之前的聊天内容,自己试着写了一下,感觉写的好复杂,求助

我写的JS

var system ={    
            win : false,    
            mac : false,    
            xll : false    
        };    
    //检测平台    
    var p = navigator.platform;    
    system.win = p.indexOf("Win") == 0;    
    system.mac = p.indexOf("Mac") == 0;    
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);    
    
    if(system.win||system.mac||system.xll){ 
        window.onload = function () {  
       
            function onMouseWheel(ev) {/*当鼠标滚轮事件发生时,执行一些操作*/  
                var ev = ev || window.event;  
                var scrollTop=$(window).scrollTop();
                if(scrollTop == 0){
                    if(chat_page < chat_totalPages){    
                        getChatList(++chat_page);
                    }else{            
                        return;
                    }
                }
                if(ev.preventDefault){/*FF 和 Chrome*/  
                    ev.preventDefault();// 阻止默认事件  
                }  
                return false;  
            }  
            addEvent(document.body,'mousewheel',onMouseWheel);  
            addEvent(document.body,'DOMMouseScroll',onMouseWheel);  
         }  
        function addEvent(obj,xEvent,fn) {  
            if(obj.attachEvent){  
                obj.attachEvent('on'+xEvent,fn);  
            }else{  
                obj.addEventListener(xEvent,fn,false);  
            }  
        }  
    }else{    
        $(document.body).infinite().on("infinite", function() {
            if(chat_loading) return;
            chat_loading = true;
            
            setTimeout(function() {             
                if(chat_page < chat_totalPages){    
                    getChatList(++chat_page);
                }else{            
                    return;
                }    
                chat_loading = false;
            }, 500);   //模拟延迟
        });  
    }  
infinite.js

/* ===============================================================================
************   Infinite ************
=============================================================================== */
/* global $:true */
+function ($) {
  "use strict";
  
  $.fn.scrollHeight = function() {
    return this[0].scrollHeight;
  };

  var Infinite = function(el, distance) {
    this.container = $(el);
    this.container.data("infinite", this);
    this.distance = distance || 50;
    this.attachEvents();
  }

  Infinite.prototype.scroll = function() {
    var container = this.container;
    var offset = container.scrollHeight() - ($(window).height() + container.scrollTop());
    if(offset <= this.distance) {
      container.trigger("infinite");
    }
  }

  Infinite.prototype.attachEvents = function(off) {
    var el = this.container;
    var scrollContainer = (el[0].tagName.toUpperCase() === "BODY" ? $(document) : el);
    scrollContainer[off ? "off" : "on"]("scroll", $.proxy(this.scroll, this));
  };
  Infinite.prototype.detachEvents = function(off) {
    this.attachEvents(true);
  }

  var infinite = function(el) {
    attachEvents(el);
  }

  $.fn.infinite = function(distance) {
    return this.each(function() {
      new Infinite(this, distance);
    });
  }
  $.fn.destroyInfinite = function() {
    return this.each(function() {
      var infinite = $(this).data("infinite");
      if(infinite && infinite.detachEvents) infinite.detachEvents();
    });
  }

}($);


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/887/viewspace-3120334/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: JQ上传图片插件
请登录后发表评论 登录
全部评论

注册时间:2019-07-29

  • 博文量
    274
  • 访问量
    1130