微信端页面的下拉刷新,兼容手机端和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();
});
}

}($);

0

2个回答

0
qq_24435837
花生喂龙 我的不是小程序啊,就是单纯的h5页面
一年多之前 回复

用了mescroll插件,实现了下拉刷新,放弃了监控鼠标滚轮事件

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
绑定事件的时候,如果pc与移动端都用,可以做一下,pc与移动端的兼容
这里只谈及PC端的mousedown mousemove mouseup事件 与 移动端的touchstart  touchmove touchend事件  var hastouch = 'ontouchstart' in window?true:false,                            //判断是否为移动端        tapstart = hastouc
Ajaxfileupload图片上传(支持PC端、微信、手机浏览器)
ajaxfileupload图片上传(支持PC端、支持微信、手机浏览器),该后台代码采用.NET实现、能够简单引入项目之中,能够快速实现图片文件上传功能
pc端和移动端(包含微信端)兼容的复制方法 clipboard.js+a标签
首先安装clipboard.jsnpm install clipboard --save-dev在vue组件中引入import Clipboard from 'clipboard'点击复制,所以写了一个点击事件 <input id="foo" type="text" value="a" v-model='invitorInfo.inviteUrl' style='opacity:0'> <butt
PC端如何跟手机端兼容
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 字体在手机端变小,高度变低的解决办法 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0...
JS自动复制吱口令
代码简洁,兼容PC端、手机端和微信端,页面加载完自动复制
PC端移动端兼容响应式布局页面的制作
之前已经制作了PC端固定布局和移动端流体布局的页面,这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面,是页面能在不同屏幕大小下呈现处不同最佳显示状态。 主要的过程就是对: 1.将width改为max-width,来适应屏幕的变动来改变自身宽度等。其他亦然。 2. /*媒体查询,参考部分Bootstarp框架*/ /*当页面大于1200px时,大屏幕,
Java开发PC端移动端同步微信授权登录注意的问题
PC端官方文档: https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&amp;amp;t=resource/res_list&amp;amp;verify=1&amp;amp;id=open1419316505&amp;amp;token=55d9cc46bab257705b9db39f422679826412db1e&amp;amp;lang=zh_CN ...
404 PC-手机兼容页面
404 PC-手机兼容页面
前端流行框架技术选型大纲-PC端、移动端、微信端
平台定位:PC网站、H5网站、微信公众号、微信小程序、iOS APP、Android APP;                    IonicReact(For React Native)React NativeWeex原生iOS原生AndroidPWAXamarin微信公众号微信小程序  公司Google+ApacheFacebookFacebookAli(https://weex.apach...
网页制作 手机端与PC端兼容
网页制作——手机端与PC端兼容手机端与PC端使用一套代码时,随屏幕分辨率的大小变化,会产生媒体查询并实现手机端与PC端的切换(一套代码)&amp;lt;meta http-equir=”Cache-control”content=”no-transform”/&amp;gt;&amp;lt;meta http-equir=”Cache-control”content=”n-siteapp”/&amp;gt;&amp;lt;meta na...
pc端对应跳转手机端代码,适用所有网站!
function GetUrlRelativePath(){     var url = document.location.toString();     var arrUrl = url.split("//");     var start = arrUrl[1].indexOf("/");     var relUrl = arrUrl[1].substring(start)
h5响应式布局,pc端和手机端的几种分辨率
1. 一般电脑屏幕分辨率  19120X1080 ,1366X768,1440X900,1600X900 2.手机端常见分辨率(分辨率与手机屏幕大小无关) 常见的级别:QVGA:240*320 WQVGA:240*400 CGA:200*320 HVGA:320*480 EGA:350*640 NVGA:360*640 WVGA:480*800 FWVGA:480*854 ...
超级富文本编辑器支持移动端pc端
超级富文本编辑器支持移动端pc端
前端H5用js判断页面在IOS,Android,微信,pc端打开的方法
// 判读是否是IOS打开 isIos: function () { var agent = navigator.userAgent; var isiOS = !!agent.match(/iPhone|mac|iPod|iPad|ios/i); return isiOS }, // 判读是否是PC打开 isPc: function () { var plat = nav...
使用CSS的@media属性来写自适应样式,兼容PC端,平板端,手机端;
这是我本人在写公司官网用到的@media属性来处理兼容手机端,垫端和PC端的样式; 首先要在HTML的头中写上以下几行代码: 然后在media.css里来为不同的屏幕写不同的样式: 这样就可以实现不同的屏幕适应不同的样式,实现自适应,希望能帮到你们;第一次写,很简单,如果有什么疑问或者错误的地方,大家可以艾特我,希望能和大家一起进步,谢谢!...
判断客户端是手机端&微信端&pc端
判断客户端 if(strpos($_SERVER[&amp;quot;HTTP_USER_AGENT&amp;quot;],'Mobile') || strpos($_SERVER['HTTP_USER_AGENT'],'MicroMessenger') !== false ){ #手机端 define('APP_PATH', __DIR__ . '/../mobile/'); }else{ #微信端 ...
html pc、手机、微信端自适应,app推广下载页面
time: 2016-04-06  客户需求一个三端适配的app推广页面,所以百度了一下,写了一个, 手机客户端下载 body { width: 100%; margin: 0 auto; background-color: #004285; } html, body, div
1.移动端与pc端点击事件的不同:
pc端你点击之后,长按不放,松开时,他会跳转执行方法。 移动端如果是上述情况,它则不会跳转从而执行方法,想要有样式效果的话,可以用active或hover属性;如果想松开跳转执行方法,则用touchend或touchcancle;
html页面pc端显示正常,手机端页面整体偏左(兼容性处理)
方法:首先设置body最小宽度body{min-width:1200px}方法:若还行不行,设置meta头部<meta name="viewport" content="width=1200, initial-scale=0.66"/>
swiper 移动端和PC端的常用解决方案
&amp;lt;link href=&quot;/dist/css/swiper.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&amp;gt; 1.利用watchSlidesVisibility和[clickedIndex]制作宽度超出后自动适应的导航 &amp;lt;div class=&quot;swiper-container swiper-contai...
WEB前端浏览器兼容性问题(PC端及移动端)
WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分 1.H5新标签在IE9以下的浏览器识别 &lt;!--[if lt IE 9]&gt; &lt;script type="text/javascript" src="js/html5shiv.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; html5shiv.js下载地址 https...
weui datepicker在pc端无法正常使用,使用iOSSelect代替
在微信公众号、微信小程序开发中,大家都知道有一款非常好用的组件:weui weui使用教程,带来了和移动端一样的视觉体验。 但是在最近项目中使用weui组件的时候,经我们的测试人员发现一个问题,那就是在手机微信浏览器中datetimePiker表现良好,但是到了pc端微信里面打开的时候发现不能正常使用了,我在网上查了很久也没查到解决方法,最后没办法,换一个组件,发现效果差不多,它就是iosSel...
微信公众号内的页面的下拉刷新,兼容手机端和PC端
现在功能是要类似于QQ聊天那样的到达顶部触发加载之前的聊天内容rnrn我在电脑端实现的js,但我需要两端都能实现rnrnrnrn```rn var system =rnrnwin : false,rnrnmac : false,rnrnxll : falsernrn;rnrn//检测平台rnrnvar p = navigator.platform;rnrnsystem.win = p.indexOf("Win") == 0;rnrnsystem.mac = p.indexOf("Mac") == 0;rnrnsystem.x11 = (p == "X11") || (p.indexOf("Linux") == 0);rnif(system.win||system.mac||system.xll) rnwindow.onload = function () rnrnfunction onMouseWheel(ev) /*当鼠标滚轮事件发生时,执行一些操作*/rnrnvar url = window.location.href;rn if(url.indexOf("chat/detail") != -1)rn var ev = ev || window.event; rn var scrollTop=$(window).scrollTop();rn if(scrollTop == 0)rn if(chat_page < chat_totalPages) rn getChatList(++chat_page);rn else rn return;rn rn rn if(ev.preventDefault)/*FF 和 Chrome*/ rn ev.preventDefault();// 阻止默认事件 rn rn return false; rn rn rn addEvent(document.body,'mousewheel',onMouseWheel); rn addEvent(document.body,'DOMMouseScroll',onMouseWheel); rn rnfunction addEvent(obj,xEvent,fn) rn if(obj.attachEvent) rn obj.attachEvent('on'+xEvent,fn); rn else rn obj.addEventListener(xEvent,fn,false); rn rn rnrn```rnrn
OpenWBS 企业建站CMS源码(手机端+PC端+微信端)
OpenWBS企业建站系统是以asp+access进行开发的互联网商务建站软件系统。 OpenWBS V4.0 企业建站系统,采用新一代全新架构,分层设计,拥有优秀的执行效率、扩展性和稳定性,一个快速帮您打造企业官网和企业独立商城的系统! 企业官网+微官网+企业商城+手机商城,您可以马上拥有! OpenWBS X5.0.5_181015 更新日志 V4企业标准版 无 X4企业电商版 修复:微信支付商户最近暴露的XML外部实体注入漏洞(XXE); 增加:是否开启/关闭强制要求微信登录的用户绑定手机号码; OpenWBS X5.0.0_180817 更新日志 V4企业标准版 增加:自定义表单页面增加富文本说明内容; 优化:前台LOGO控制; 优化:网页顶部登录/免费注册显示,后台关掉登录和注册功能后不显示; OpenWBS X4.9.9_180727 更新日志 V4企业标准版 优化:后台管理菜单; 优化:授权网站后台title显示网站名称; X4企业电商版 增加:每个商品可以设置购买满X件免运费; 优化:后台管理菜单; 优化:去掉所有商品列表页的移动按钮; 优化:授权网站后台title显示网站名称;
将PC端网页适配手机
留守
#React.js 入门与实战 开发 适配PC端和移动端的 新闻头条平台
*1-1课程简介 ---solidadc##react.js简介部分1.对js,ECMAScript5,ECMAScript6,css,HTML5,以及node.js 开发环境热加载组件webpack的简介安装与配置.2.前端开发工具ANT以及相关的插件的详细介绍.##React.js基础知识的学习###1.React.js组件基础###2.React.j...
CSS来适配PC和手机端
直接上代码,可以根据设备宽度来区分,下面的max-width好像无效 @media only screen and (min-device-width: 120px) and (max-device-width:780px) and (-webkit-min-device-pixel-ratio: 2) {     .layui-table-view {         overflow: au...
微信端上拉下拉刷新
&amp;lt;%@ page contentType=&quot;text/html; charset=UTF-8&quot;%&amp;gt; &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&qu
HTML5视频播放器支持电脑PC端与移动手机页面
一款非常值的收藏的HTML5视频播放器插件,完美兼容PC端与手机端。资源来源:http://www.xwcms.net
微信pc版与手机端文件保存位置查找
前言 由于微信群的文件没有另外保存,想起来要使用时,居然手机端与pc端都找不到文件夹,百度了一会会才发现微信隐藏有点深啊… 微信电脑版聊天记录保存在哪里 手机端 PC端 ...
微信自定义分享开发工具、电脑端微信和手机端不一样(配置ok,分享朋友圈路径文字不对)
代码都一样,只有一种可能,TX机制改了
关于微新分享PC微信端成功,手机微信失败
打开微信调试功能 发现会弹出 首先肯定是根据百度来寻找帮助,发现一篇总结了出现这种情况的各种原因以及解决方法的文章:https://www.yudouyudou.com/jiaochengheji/wangzhanjianshe/1237.html 根据步骤一个个测试,发现并没有解决问题。于是寻找了另一篇文章https://blog.csdn.net/gong0585/article/det...
兼容pc端和手机的滑块验证码
纯js滑块验证码,兼容pc及手机,包括初始化,验证错误及验证通过方法。
多图片预览-左右切换查看-兼容PC、移动端
点击查看图片预览,支持多图片预约,可左右切换查看,兼容PC、移动端
如何判断浏览器是移动端还是pc端,以及是否微信端?
方法一: // 判断浏览器函数 function isMobile(){ if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|Browser...
前端进阶路(一)(pc端适配手机端)
首先在head头部标签中写下适配属性: &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no&quot;&amp;gt; 个人理解适配: 使用CSS媒体查询标签来达到适配的效果  ----------...
HTML5视频播放器支持电脑PC端与移动手机页面.zip
HTML5视频播放器:作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。
完整的商城静态网页(适配手机端和电脑端)
完整的商城静态网页(适配手机端和电脑端) 完整的商城静态网页(适配手机端和电脑端)
pc与移动端端适配网页模板
基于pc与移动端完美适配模板解决方案,对于前端新手来说稍加改动就可完成建站
PC端扫码进入移动端出现的问题,求解
通过pc端页面扫码进入移动端,手机上的浏览器和qq扫码是可以正常显示,用微信扫码,页面数据没有渲染,数据是用ajax请求,数据接口用cors解决跨域问题,为什么微信上看不了页面,各位大神,求解啊...