我搜索了网络和此网站,但没有找到适合我的问题的解决方案。
情况: - 我有一个 JQM 基本页面,上面有 ListView 。 - 一些事件涉及滑动等
问题:-当我通过单击某个元素、按住它并向下或向上滑动来滚动列表时,它可以完美滚动,但是当我释放屏幕然后滚动时再次在该列表项上,它什么也没做。
我制作了一个 jsfiddle 在移动设备上重现它:http://jsfiddle.net/WQdJk/9/ *这是代码*:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
$(document).on('click', 'ul li a', function(){
$('h3').css("color", "orange");
});
$(document).on( "swipeleft swiperight", function( e ) {
if ( e.type === "swipeleft" )
$("h3").css("color","blue");
else
$("h3").css("color","green");
});
</script>
<div data-role="page" id="index" data-theme="a">
<div data-role="header" class="header" data-position="fixed" data-tap-toggle="false">
<h3>TEST</h3>
</div>
<div data-role="content" style="margin-top:50px; height:500px; overflow:scroll;">
<ul data-role="listview">
<li><a data-role="button" data-icon="home">Accueil</a></li>
<li><a data-role="button" data-icon="check">Tâches</a></li>
<li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
<li><a data-role="button" data-icon="grid">Dossiers</a></li>
<li><a data-role="button" data-icon="gear">Paramètres</a></li>
<li><a data-role="button" data-icon="home">Accueil</a></li>
<li><a data-role="button" data-icon="check">Tâches</a></li>
<li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
<li><a data-role="button" data-icon="grid">Dossiers</a></li>
<li><a data-role="button" data-icon="gear">Paramètres</a></li>
<li><a data-role="button" data-icon="home">Accueil</a></li>
<li><a data-role="button" data-icon="check">Tâches</a></li>
<li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
<li><a data-role="button" data-icon="grid">Dossiers</a></li>
<li><a data-role="button" data-icon="gear">Paramètres</a></li>
<li><a data-role="button" data-icon="home">Accueil</a></li>
<li><a data-role="button" data-icon="check">Tâches</a></li>
<li><a data-role="button" data-icon="calendar">Rendez-vous</a></li>
<li><a data-role="button" data-icon="grid">Dossiers</a></li>
<li><a data-role="button" data-icon="gear">Paramètres</a></li>
</ul>
</div>
</div>
<小时/>
您能给我有关如何解决此问题的建议或提示吗?滚动后按钮似乎处于待机状态...
提前致谢
<小时/>PS:实际上,只有在滚动元素的文本、释放滚动、从该元素再次滚动但不在文本上(在按钮本身上但在 anchor 文本之外)滚动时才会发生这种情况
最佳答案
这是由 JQM 中的一个错误引起的,该错误已解决但尚未实现 https://github.com/jquery/jquery-mobile/issues/5534
基本上,滑动事件测量的最小距离必须考虑设备的像素密度。因此,在 JQM 的情况下,对 touch.js 进行以下更改将解决该问题:
horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;
关于javascript - 在某些情况下,滚动在 ListView 上不起作用 - JQM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22095241/