Iscroll下拉刷新问题集合、click点击事件

来源：互联网发布：apache日志 json 编辑：程序博客网时间：2024/05/29 08:25

<body >
<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>
</body>

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;
} //测试大量机器总结的规律,可能会有极小部分机器在选择功能上依然出现问题
}
}

有一部分资料表明preventDefault ：false是可以解决这个问题，但是经过测试发现这个根本没有起作用。

2 0