使用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)
}