H5上拉加载以及在微信内置浏览器上拉加载失效问题记录

第一次采用了距离顶部距离的方式来控制上拉加载

 $(window).scroll(function () {// 滚动条距离顶部的距离 大于 200px时if ($(window).scrollTop() >= nowPageNo * (nowPageNo * 100)) {console.log('距离大于200')console.log(stopPage)if (stopPage == true) {return;} else {nowPageNo += 1getDataList()}} else {return;}});

nowPageNo 为当前页码，stopPage为停止请求，当发出请求之后，stopPage应该变更为true，在结果返回之前不应该再次进行请求。
主要利用浏览器滚动时，滚动条距离顶部的距离来判断，一页展现的量是固定的，这个就是需要根据自己的需求来设定不同的距离，以达到刚好的效果。

采用了浏览器视窗距离固定值来触发上拉加载

        $(window).scroll(function () {let clientHeight = document.documentElement.clientHeight; //浏览器视口的高度let scrollHeight = document.body.scrollHeight; //文档的总高度let scrollTop = document.documentElement.scrollTop; //滚动条在Y轴上的滚动距离let distance = 50;  //距离视窗还用50的时候，开始触发；if (scrollHeight-scrollTop-clientHeight <= distance) {console.log('触发加载')console.log(stopPage)if (stopPage == true) {return;} else {pageNo += 1init()stopPage = true}}});

这个思想倒是不难理解，总高度去掉滚动距离，去掉视口高度，小于你所设置的距视窗距离，就触发上拉加载。
这种写法倒是比第一种要更好理解一些。

其中存在的问题

笔者在采用这个写法来写H5界面时候，遇到了一个奇怪问题，我在测试这个上拉加载的时候使用的是电脑上浏览器进行测试的，结果是不存在任何问题的，上拉加载很符合要求，并且测试在测试的时候也没有任何问题，然后我们就正常上线啦，没几天就反馈出现了问题。
在安卓手机上，使用微信打开该界面，可以正常滚动，但是不能触发上拉加载，但是使用浏览器打开，也是正常的，同时在ios上也是不存在任何问题。这个问题的产生让我陷入了沉思，mmp，什么玩意？？？？？
在对微信的一通埋怨之后，我又再次着手对其逻辑进行了判断，发现逻辑上应该是没有问题的。那么剩下来的就只有兼容性这个问题啦，明确了方向就只能摸索看看是哪里出现了问题。
能滚动没触发上拉加载，说明进行判断的时候有问题了，于时我直接对这三个值进行逐一判断，是否有值，这么一排查，于是就发现了问题：在微信上打开的界面不能用document.documentElement.scrollTop获取到滚动距离，好家伙，有点东西了。
于时我采用
$(window).scrollTop()

来获取滚动距离，这个时候就没有什么问题了，百度了一下，二者的效果是一样的，$(window).scrollTop()有更好的兼容性。
所以如果有人遇到这样的问题，就不用费心思去想啦
随手点赞，养成好习惯

H5上拉加载以及在微信内置浏览器上拉加载失效问题记录相关推荐

微信 html5禁止拖拽,js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页...
大家可能会遇到开发公众号的时候,下来会出来源地址,下面的代码可以解决禁止下拉的问题~ 禁止下拉 .scroll{ position:absolute; overflow:scroll; -webkit ...
window客户端-微信内置浏览器-公众号H5-打开白屏
原文链接:https://dsx2016.com/?p=1154 公众号:大师兄2016 问题场景在window上客户端微信打开公众号H5网页,内置浏览器白屏一些基本的关联上一个版本是可以正常登 ...
使用Chrome调试微信内置浏览器
微信现在采用的X5内核基于Chrome,我们可以通过Chrome调试微信内置浏览器. 在开始之前,需要准备一台带有Chrome浏览器的电脑,PC和Mac均可,然后需要一部安装有微信的Android手机 ...
php h5页面微信登录页面,客户端，微信内置浏览器加载H5页面字体变大问题
在开发当中呢,经常会有很多H5的小活动页面,需要在微信的环境下使用.偶尔会出现H5页面在微信或者其他客户端中出现字体变大的问题,下面提供解决方法. 首先先把网页自动放大放小的关掉. 安卓解决微信内置浏 ...
html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
weixin公众号页面返回上一层_《解决微信内置浏览器返回上一页强制刷新问题方法》...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
微信内置浏览器调试和调试微信内的H5页面汇总（持续更新...)
调试PC端微信内置浏览器(只支持3.2.1以下的) (1)添加以下代码, 查看chrome版本和内核安放位置 <html><script type="text/javasc ...
CocosCreator H5 微信内置浏览器调起微信支付
CocosCreator H5 微信内置浏览器调起微信支付先来看看效果图微信公众平台相关文档传送门https://mp.weixin.qq.com/wiki?t=resource/res_main ...

H5上拉加载以及在微信内置浏览器上拉加载失效问题记录

其中存在的问题

H5上拉加载以及在微信内置浏览器上拉加载失效问题记录相关推荐

最新文章

热门文章