刷卡功能物化標籤

Question

所以，我正在使用materializecss進行網頁開發。

有一個選項卡功能，但它不支持滑動功能，但像在本機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> 

Answer 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

Answer 2

我仍然沒有在官方materializecss演示中看到這個所以對每個人的未來利益：

$('#tabs-swipe-demo').tabs({ 'swipeable': true }); 

Answer 3

也許，你應該在你的js此行。

$(document).ready(function() { 
    $('.tabs').tabs({swipeable: true}); 
}); 

Answer 4

CSS地址：

.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>