Функция прокрутки для материализации вкладок

Итак, я использую 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>

tabs swipe materialize
person Steve Kim    schedule 29.12.2015    source источник

Ответы (4)


arrow_upward
10
arrow_downward

Я до сих пор не видел этого в официальной демонстрации materializecss, так что на будущее:

$('#tabs-swipe-demo').tabs({ 'swipeable': true });
person Rogue45    schedule 08.02.2017
comment
добавление этого разрушает представление рабочего стола. - person shmshd; 17.04.2017
comment
@MohammedShamshid Да, и для меня тоже! Вы знаете, как это исправить? - person Frithjof; 15.05.2017

arrow_upward
2
arrow_downward

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>

person RaySaraiva    schedule 11.11.2017

arrow_upward
1
arrow_downward

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

Наслаждаться!

пс. проверьте: http://labs.rampinteractive.co.uk/touchSwipe/demos/Basic_swipe.html

person starbuck    schedule 24.01.2016

arrow_upward
1
arrow_downward

Возможно, вам следует включить эту строку в ваш js.

$( document ).ready(function() {
   $('.tabs').tabs({swipeable: true});
});
person Juan Fer Zuluaga    schedule 23.07.2017