使用apicloud做APP时,页面有下拉刷新模块功能和初始视图有日期选择器时,当进行日期选择时,下滑会带动页面下拉触发下拉刷新;
同理,在底部也会出现相似情况;
经过测试,发现只有在滚动条高度为零的情况下,才会出现带动页面的bug;
怎么解决呢?尝试了一些方法,最后是让滚动条高度永远不为0;
代码:
// 实时获取滚动值 修复触发下拉刷新但未到回阀值 页面滚动为0时再选择日期
var scrolltime = 100,scrollsetTime;
windowScroll()
function windowScroll(){
if(scrollsetTime){
clearTimeout(scrollsetTime)
}
// 获取滚动条高度
var top = $(window).scrollTop();
// 判断滚动条高度 是否为 0
if(top == 0){
// 设置滚动条高度为1
$(window).scrollTop(1)
}
scrollsetTime = setTimeout(windowScroll,scrolltime)
}
我这里获取滚动条高度是用延时器(setTimeout)循环获取,可以用监听滚动事件来获取滚动条高度
这样在安卓上测试是没有问题,完美解决了该问题,但是到苹果手机上,头疼。。。。。 下拉刷新会闪,因为触发下拉刷新滚动条高度是到0的,
这样就会触发滚动条监听,会让滚动条高度为1;
怎么解决了。。。。。。。。。。。。。。。。。。。。。。。。。。。
想到了可以判断一下手机是安卓还是ios,是安卓时执行滚动条监听,ios则不执行
// 判断手机类型 安卓还是ios
$(function () {
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
windowScroll()
}
if (isIOS) {
// console.log("ios")
}
});
// 实时获取滚动值 修复触发下拉刷新但未到回阀值 页面滚动为0时再选择日期
var scrolltime = 100,scrollsetTime;
function windowScroll(){
if(scrollsetTime){
clearTimeout(scrollsetTime)
}
var top = $(window).scrollTop();
if(top == 0){
$(window).scrollTop(1)
}
scrollsetTime = setTimeout(windowScroll,scrolltime)
}