<div id="wrapper" style="box-sizing: border-box;width:100%;height: 100%;overflow: auto;">
<div id="scroller">
<div class="scroller_pullDownDiv">
<span class="pullDown_msg">下拉刷新</span><br>
</div>
<div class="js_data_div" style="overflow: hidden;">
<!-- 動態填充數據的DIV -->
</div>
</div>
</div>
</body><!-- JS -->
var common_bodyHeight = $(window).height();//整個頁面的高度
var billDetail_myScroll;//賬單明細中的IScroll
var billDetail_FirstTime = null;//賬單明細中需要用到的時間判斷
var _objheight = $(".js_data_div").height();//數據的長度
var _height1 ;//數據的高度，主要是爲iscroll 的滑動
if(_objheight < common_bodyHeight){//如果數據的長度小於整體頁面上應該的長度，需要自動爲其添加長度
$(".js_init_wdzdlist").css("height",common_bodyHeight + 1 +'px');
}else{
_height1 = $(".js_init_wdzdlist").height();
$(".js_init_wdzdlist").css("height",_height1 + 'px');
}
$("#scroller")[0].style.WebkitTransform = "translateX(0px)";
if(billDetail_myScroll){
billDetail_myScroll.destroy();
}
var click_flage = iscroll_appVerSion();
billDetail_myScroll = new IScroll('#_billDetail_wrapper', {
probeType:3,//如果爲1/2或者不用 slideDown 則不執行
mouseWheel: true,
//preventDefault: false,//用這個有點擊事件 但是下滑是不連續
click:click_flage,// 用這個有點擊事件，但是會出現點擊一次出現了兩次點擊的結果
scroll:true
});
billDetail_myScroll.on("scroll",function(){
var y = this.y;
//樣式和內容展示的部分的改變。
if (y >= 40) {
$("#wrapper").find(".pullDown_msg").html("鬆開刷新");
} else if (y < 40 && y > -1) {
$("#wrapper").find(".pullDown_msg").html("下拉刷新");
}
});
billDetail_myScroll.on("slideDown",function(){
if (billDetail_FirstTime == null){
billDetail_FirstTime = new Date().getTime();
}else{
var t2 = new Date().getTime();
if(t2 - billDetail_FirstTime < 500){
billDetail_FirstTime = t2;
return;
}else{
billDetail_FirstTime = t2;
}
}
if(this.y > 50){
}
});
1，下拉滑動不了,上拉滑動不上去
在這個應用的需要兩層，一層id爲wrapper，一層爲id爲scroller，資料表明，iscroller的高度必須大於wrapper的高度，
我用的是整個屏幕的下拉刷新，所以首先給了一個height:100%，如果下拉滑動不了，則scroller的高度小宇屏幕的高度，我們只需要給iscroller一個樣式$("#scroller").css("height",相對的高度);
wrapper的高度又分爲兩種情況：
一、scroller的填充完數據的高度小於屏幕的高度，將scroller屏幕高度設置爲屏幕高度（稍微超過屏幕高度1px也可以）。
二、scroller的填充完數據的高度 大於 屏幕 的 高度，將scroller屏幕高度設置爲數據的高度。
三、動態刷新數據，第二次獲取的高度時獲取了第一次的高度（第一次的高度小於第二次的高度滑動出現不能滑動），
我在每一個動態刷新數據時，
2，上劃出現空白。
上劃空白是因爲iscroller的高度超過了數據的高度。
一、當數據高度 小於 屏幕 高度，之前獲取屏幕高度時，用的是window.screen.height() ，
在CoolPad部分手機、sony LT25c手機、HUAWEI C8813Q等適配測試時，出現用window.screen.height()獲取的高度會遠超過實際的高度，
因此修改成$(document).height()這個方法獲取屏幕的高度，就解決了問題。
二、動態刷新數據，第二次獲取的高度時獲取了第一次的高度（第一次的高度高於第二次的高度滑動出現空白）；
因爲我用的是動態加載數據，每一次加載數據都重新new iscroll，這種情況下，出現了第一次運行的有一個iscroll，第二次運行兩個，一次輪推，會出現滑動到時候，出現這種情況；
3，獲取屏幕高度但是滑動距離和獲取的高度對應不上。（第一次是正確的）
在某些手機適配中，獲取屏幕scroll的高度我們用的是$.height();但是後來發現用height()獲取的高度會出現獲取的高度和真實的高度對應不上。
發現在刷新數據的時候用獲取scroll的樣式height能夠獲取正確的，前提是刷新數據的時候將height的數值更新。
if((parseInt($_scroll_id[0].style.height) || $_scroll_id.height()) < common_bodyHeight ){
$_scroll_id.css("height",common_bodyHeight +1 +'px');
}else{
$_scroll_id.css("height",'');
$_scroll_id.css("height",parseInt($_scroll_id[0].style.height) +'px');
}
4，Iscroll的Click事件
其次,iscroll內的的click事件處理,默認是false,這在ios系統的手機上會出現click執行兩次,也就無效的情況,需要改成true,所以需要對創建的示例增加參數.但是問題在於兼容了ios後,android各個版本會出現同樣的問題.解決方案,對不同的安卓設備採取不同的click屬性值處理,但是經過大量機器測試,依然可能出現無法兼容的情況(實際上是通過一個正則處理的,見代碼)
function iScrollClick(){ //設備識別來控制iscroll的click真假
if (/iPhone|iPad|iPod|Macintosh/i.test(UA)) return true;
if (/Chrome/i.test(UA)) return (/Android/i.test(UA));
if (/Silk/i.test(UA)) return false;
if (/Android/i.test(UA)) {
var s = UA.match(/Android [\d+.]{1,5}/)[0].replace('Android ','');
return parseFloat(s[0]+s[2]+s[4]) <= 442 && parseFloat(s[0]+s[2]+s[4]) > 430 ? true : false;
} //測試大量機器總結的規律,可能會有極小部分機器在選擇功能上依然出現問題
}
}