我一直在尝试将jquery mobile和iscroll5合并到我的项目中,我需要拉动刷新功能,像滚动一样流畅的脸书并在滚动端加载内容。我发现一个脚本在没有jquery mobile的情况下完美运行,但是当我使用jquery mobile并尝试滚动它时检测到我的滚动像悬停一样,当我的手指在屏幕上时它不是平滑滚动,并且当我释放它时开始再次光滑。
我最近几天读过这些文章的所有文章,我无法修复它。我使用的是文字http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html
Jquery Mobile版本是1.4.5。我在android设备上使用它为cordoba最新versin项目。
代码全部来自我提供的链接,唯一的变化是我已经包含了jquery mobile javascript,css和themes文件夹。
我已更改此代码
else if (refresh && next_page) {
// Loading the next-page content and refreshing
$(function() {
inc += 10;
$.ajax({
dataType: "json",
url: "http://domain/json.php?l="+inc,
type: "get",
success: function(data) {
console.log(data);
var temp = '';
var i = 0;
$.each(data, function(key, val) {
temp += '<li style="display:none" id="'+val.id+'"><a href="' + val.link + '" data-transition="slide" ><div class="imgLiquidFill imgLiquid" style="width:80px; height:60px;">' + val.slika + '</div><h2>' + val.naslov +'</h2><p><b>' + val.izvor + '</b>: ' + val.datum + '</p><p>' + val.tekst + '</p></a><div class="clear"></div></li>';
++i;
});
$.mobile.loading( 'hide');
$('#wrapper > #scroller > ul').append(temp).listview('refresh');
$(".imgLiquidFill").imgLiquid({fill:true});
$('li:hidden').show();
}
});
});
我正在更新滚动代码,但我的问题是我无法滚动
我认为最好是在滚动时锁定点击,因此如果开始滚动,我在屏幕上的初始点击不会被视为点击。
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#wrapper {
position: absolute;
z-index: 100;
top: 45px;
bottom: 48px;
left:9999px; /* Not a must - can be 0 - but it makes the appearance of the content a bit nicer */
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 100;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0px, 0px, 0px);
}
#scroller li {
padding: 0 10px;
height: 80px;
line-height: 80px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
滚动条设置
myScroll = new IScroll('#wrapper', {
probeType:1,
tap:true,
click:false,
preventDefaultException:{tagName:/.*/},
mouseWheel:true,
scrollbars:true,
fadeScrollbars:true,
interactiveScrollbars:false,
keyBindings:false,
deceleration:0.0002,
startY:(parseInt(offset)*(-1))
});