花生喂龙 2018-02-26 17:43 采纳率: 73.7%
浏览 1987
已采纳

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

之前只弄过滚动条滚到底部自动加载下一页,引入了一个别人写的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);
scrollContaineroff ? "off" : "on");
};
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();
});
}

}($);

展开全部

  • 写回答

2条回答 默认 最新

  • threenewbee 2018-02-27 07:44
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目
  • ¥30 海外项目,如何降低Google Map接口费用?
  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部