Материализация свайпов не работает в модальном режиме - PullRequest
Новая
       9

Материализация свайпов не работает в модальном режиме

0 голосов
/ 20 октября 2018

У меня странная проблема.Я использую прокрутку на вкладках материализации, и когда я делаю прокрутку без модала, он работает нормально, но когда я включаю их в модал, функция прокрутки больше не работает 

$(document).ready(function() {
   $('.modal').modal();
   $('.tabs').tabs({
      swipeable: true
   });
})
div.tabs-content.carousel.carousel-slider {
  height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
  <li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>

<div id="profession-registration-modal" class="modal">
<div class="modal-content">
    <h4>Register your profession</h4>

    <div class="row">
        <div class="col s12">
            <ul id="tabs-swipe-demo" class="tabs">
                <li class="tab col s3"><a href="#test-swipe-1">Test 1</a></li>
                <li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
                <li class="tab col s3"><a href="#test-swipe-3">Test 3</a></li>
            </ul>
            <div id="test-swipe-1" class="col s12 blue">Test 1</div>
            <div id="test-swipe-2" class="col s12 red">Test 2</div>
            <div id="test-swipe-3" class="col s12 green">Test 3</div>
        </div>
    </div>

</div>
<div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>

Вот скрипка: jsfiddle

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Поскольку jQuery больше не является зависимостью в Materialize CSS, поэтому для того, чтобы сделать это с vanillaJS, можно использовать это - 

document.addEventListener('DOMContentLoaded', function() {
    const options = {
        onOpenEnd: (el) => {
        M.Tabs.init(el.querySelector('.tabs'), {
          swipeable: true
        });
      }
    }
    let elems = document.querySelectorAll('.modal');
    let instances = M.Modal.init(elems, options);
});
0 голосов
/ 25 октября 2018

Поскольку по умолчанию модал скрыт, обычная инициализация вкладок внутри модалов не будет работать.Вы можете использовать обратные вызовы, такие как onOpenEnd, для повторной инициализации ваших вкладок, чтобы они правильно отображались после полного открытия модала. 

$('.modal').modal({
  onOpenEnd: function(el) {
    $(el).find('.tabs').tabs({ swipeable: true });
  }
});

Вот обновленная скрипта, которая использует этот обратный вызов: https://jsfiddle.net/y7rmbd6w/14/

...