移动端H5下拉触底事件异常处理

手机端下拉触底事件异常

$(window).scroll(function(){//下拉事件var windowH = $(window).height();//设备可见区域高度var documentH = $('body').height();//整个网页的高度（包括未显示的部分）var scrollH = $(document).scrollTop();//滚动条滚动上去的高度if((documentH - windowH - scrollH) == 0 ){getActList();//事件}});

上面是一开始的下拉触底事件，在web端调试时一切正常，但在手机端调试便出错，输出高度信息一看，部分手机内部的srollTop像素不为整，更离谱的是documentH - windowH - scrollH 不一定等于 0 ；但误差肯定在一像素内所有修改代码为

var flag = false;//防止多次调用下拉触发事件
$(window).scroll(function(){//下拉事件var windowH = $(window).height();//设备可见区域高度var documentH = $('body').height();//整个网页的高度（包括未显示的部分）var scrollH = $(document).scrollTop();//滚动条滚动上去的高度if((documentH - windowH - scrollH) <= 1 && flag === false){//触底事件 移动端像素误差为1像素内，设置半秒内只能触发一次flag = true;getActList();//事件setTimeout(()=>{flag = false;},500);}
});

移动端H5下拉触底事件异常处理相关推荐

【微信小程序】-—下拉刷新、上拉触底事件详细讲解
1.页面事件–下拉刷新事件 1.1什么是下拉刷新下拉式移动端的专有名词,指的是通过手指子在屏幕上的下拉滑动操作,从而重新加载页面数据 2.启动下拉刷新 (1)方法一:全局开启下拉刷新在app.js ...
微信小程序特殊布局下，页面上拉触底事件onReachBottom无法触发解决方法
一.js import fn from '../../utils/functions.js'; // 你自己封装的方法集 Page({data: {list: [],page: 1,loading: ...
微信小程序分页功能（上拉触底事件）
js核心代码 Page({data: {// 前台显示listshowlist: [],// 当前页pageNumber: 1,// 总页数totalPage: 1,},onLoad: functio ...
vue下拉触底，判断上滑下滑
下拉触底常用参数 scrollHeight(文档内容实际高度,包括超出视窗的溢出部分). scrollTop(滚动条滚动距离). clientHeight(窗口可视范围高度). 当 clientHe ...
【微信小程序】上拉触底事件
上拉触底手指在屏幕上的上拉滑动操作从而加载更多数据页面上拉触底事件触发时距页面的距离默认50px (滚动条距离底部的距离自动加载更多数据)"onReachBottomDistanc ...
html5 手机端分页,哪位大神可以提供个移动端h5下拉分页的方法
例如,京东的分页效果 $PageIndex = 1; var $uzaiProducts = $doc.getElementsByClassName('uzai-products')[0]; // 产 ...
微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部需要回到顶部重新计算高度 onReachBottom函数被覆盖 1.配置属性问题在app.json或者本页的json文件中 ...
微信小程序页面事件 - 下拉刷新与上拉触底
一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新启用下拉刷新有两种方式: ①全局开启下拉刷新在 app.j ...
【微信小程序】实现下拉刷新和上拉触底加载更多数据的页面事件
1.下拉刷新事件 1. 什么是下拉刷新下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为 2. 启用下拉刷新启用下拉刷新有两种方式: ① 全局开启下拉刷新 ...

移动端H5下拉触底事件异常处理

移动端H5下拉触底事件异常处理相关推荐

最新文章

热门文章