tabs - tab - Desliza la función a las pestañas de materializecss

tab content materialize

Question

Entonces, estoy usando materializecss para un desarrollo web.

Hay una función de tabulación, pero aún no es compatible con la función deslizar en el dispositivo móvil como una aplicación nativa de Android.

¿Alguien sabe cómo puedo implementar la funcionalidad de deslizamiento? ¿Qué tan difícil sería esto?

Por ejemplo, aquí está el contenido de la demostración:

<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

CSS agregar:

.carousel .carousel-item{
    width:100%;
}

JS agrega:

$(''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>

Answer 2

Tal vez, deberías incluir esta línea en tu js.

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

Answer 3

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} );
});

¡Disfrutar!

PD. cheque: http://labs.rampinteractive.co.uk/touchSwipe/demos/Basic_swipe.html

Answer 4

Todavía no vi esto en la demo oficial de materializecss para beneficio futuro de todos:

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