我正在使用jQuery Mobile并创建了一些类似于Android Holo Tabs的东西:
为了让滑动手势能够在标签之间切换,这就是我添加的代码:
$("#myPage #pageTabs").on('swipeleft swiperight', function(e){
e.stopPropagation();
e.preventDefault();
});
$("#myPage").on('swipeleft', function(){
ui.activities.swipe(1);
}).on('swiperight', function(){
ui.activities.swipe(-1);
});
使用标签'HTML类似:
<div id="pageTabs">
<div class="tab">
<a href="#" data-dayOfMonth="26">Thu</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="27">Fri</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="28" data-meridian="am">Sat AM</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="28" data-meridian="pm">Sat PM</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="29">Sun</a>
</div>
</div>
我正在侦听页面级别的滑动手势,因为如果没有足够的内容,div[data-role=content]
有时可能无法垂直填充屏幕。如果我听了这个div并且它没有覆盖屏幕,并且你靠近底部滑动,事件将不会触发此div,它将在根页面上(div[data-role=page]
)。
这是Firefox对该页面的3D渲染,用于证明上述断言。我已注释div[data-role=content]
:
出于这个原因,我正在页面层面听它;但由于标签的数量可以滚出视口(如上所示:星期日在屏幕右侧),我希望用户能够水平滚动它。我已经有了水平滚动工作(这只是一些简单的CSS),但问题是,即使上面看到我的e.stopPropagation()
,滑动手势也会冒泡到页面元素,我的滑动手势正在阻止在我添加滑动手势之前可用的平滑滚动。
我是否误解了事件冒泡是如何工作的,或者在这种情况下如何阻止它?
答案 0 :(得分:2)
我找到了一种解决方法,但实际的解决方案会更好。
因为问题是我没有满足这两个要求的容器:
我决定添加一个包装器:
<div id="pageTabs">
<div class="tab">
<a href="#" data-dayOfMonth="26">Thu</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="27">Fri</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="28" data-meridian="am">Sat AM</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="28" data-meridian="pm">Sat PM</a>
</div>
<div class="tab">
<a href="#" data-dayOfMonth="29">Sun</a>
</div>
</div>
<div class="contentWrapper">
<!-- ... -->
</div>
我已将滑动手势附件移至此新包装,并从标签栏中移除了滑动侦听器:
$(".contentWrapper").on('swipeleft', function(){
ui.activities.swipe(1);
}).on('swiperight', function(){
ui.activities.swipe(-1);
});
为了确保它总是填满屏幕,每次加载页面时,我将其最小高度设置为视口的计算高度减去包装器的顶部偏移量:
$("#myPage").on('pageshow', function(){
var viewPortHeight = document.documentElement.clientHeight;
var offset = $(".contentWrapper", this)[0].offsetTop;
$(".contentWrapper", this).css({'min-height': viewPortHeight - offset + 'px', 'display': 'block'});
});
这正是我想要的。我可以在页面内容上滑动以切换标签,我可以水平滚动标签而不激活滑动手势。
对于有兴趣达到同样效果的人,这是我的LESSCSS:
#pageTabs {
@tab-highlight: @lightblue;
margin: -15px -15px 15px -15px;
padding: 0;
height: 38px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
border-bottom: 2px solid @tab-highlight;
.tab {
display: inline-block;
vertical-align: top;
border-left: 1px solid @tab-highlight;
margin-left: -5px;
height: 100%;
&:first-child {
margin-left: 0;
}
&.active {
height: 32px;
border-bottom: 8px solid @tab-highlight;
}
a {
padding: 12px 20px 0px 20px;
display: block;
height: 100%;
text-decoration: none;
}
}
}