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>

这是小提琴：jsfiddle

Answer 1

由于默认情况下模态是隐藏的，因此模态内选项卡的常规初始化将不起作用。您可以使用onOpenEnd之类的回调来重新初始化选项卡，以便在完全打开模式后它们可以正确呈现。

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

以下是使用该回调的更新的小提琴：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);
});

物化滑动选项卡不适用于模式

2 个答案: