Materialise 滑动选项卡在模式下不起作用

Question

我遇到了一个奇怪的问题。我在实体化选项卡上使用滑动，当我在没有模态的情况下进行滑动时它工作正常但是当我将它们包含在模态中时滑动功能不再起作用

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

这里是fiddle：jsfiddle

Answer 1

由于模态框默认隐藏，模态框内的选项卡正常初始化将无法正常工作。您可以使用 onOpenEnd 之类的回调来重新初始化您的选项卡，以便它们在模式完全打开后正确呈现。

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

这是使用该回调的更新 fiddle：https://jsfiddle.net/y7rmbd6w/14/

Answer 2

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

Materialise 滑动选项卡在模式下不起作用

Materialize swipe tabs not working in modal

javascript

jquery

tabs

modal-dialog

materialize