所以,我正在使用materializecss进行Web开发。
有一个标签功能,但它不支持在移动设备上滑动功能,就像本机Android应用程序一样。
有谁知道如何实现滑动功能呢?这有多难?
例如,这是演示内容:
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
答案 0 :(得分:9)
我仍然没有在官方的materializecss演示中看到这一点,所以每个人都有未来的好处:
$('#tabs-swipe-demo').tabs({ 'swipeable': true });
答案 1 :(得分:1)
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
$(function() {
$("#test").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
$(this).text("You swiped " + direction );
}
});
//Set some options later
$("#test").swipe( {fingers:2} );
});
享受!
PS。检查:http://labs.rampinteractive.co.uk/touchSwipe/demos/Basic_swipe.html
答案 2 :(得分:1)
CSS add:
.carousel .carousel-item{
width:100%;
}
JS添加:
$('ul.tabs').tabs({
swipeable : true,
responsiveThreshold : Infinity
});
$('ul.tabs').tabs({
swipeable: true,
responsiveThreshold: Infinity
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<style>
.carousel .carousel-item {
width: 100%;
}
</style>
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3"><a class="active" href="#swipe-1">Test 1</a></li>
<li class="tab col s3"><a href="#swipe-2">Test 2</a></li>
<li class="tab col s3"><a href="#swipe-3">Test 3</a></li>
</ul>
<div id="swipe-1" class="col s12 blue">First tab content</div>
<div id="swipe-2" class="col s12 red">Second tab content</div>
<div id="swipe-3" class="col s12 green">Third tab content</div>
答案 3 :(得分:0)
也许,你应该在你的js中包含这一行。
$( document ).ready(function() {
$('.tabs').tabs({swipeable: true});
});