Materialize swipe tabs not working in modal

问题

I am encountering a strange problem. I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore

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

Here is the fiddle: jsfiddle

回答1:

Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.

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

Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/

回答2:

Since jQuery is no longer a dependency in Materialize CSS, so in order to do it with vanillaJS, one can use this -

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

来源：https://stackoverflow.com/questions/52903051/materialize-swipe-tabs-not-working-in-modal

标签

javascript

jquery

tabs

modal-dialog

materialize