Question

我正在使用Materialize v0.98.0（本地副本），并且具有以下代码。我已经在Chrome控制台中收到有关CSS设置的消息，但似乎无法弄清楚。

<link type="text/css" rel="stylesheet" href="../_css/materialize.css"  media="screen,projection,print"/>
<script type="text/javascript" src="../_js/materialize.js"></script>

#roll_tabs {
    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

<div class="row">
    <div class="col s12">
        <ul class="tabs" id="roll_tabs">
            <li class="tab col"><a href="#EX-33-04-01">EX-33-04-01</a></li>
            <li class="tab col"><a href="#EX-33-05">EX-33-05</a></li>
            <li class="tab col"><a href="#EX-33-06">EX-33-06</a></li>
            <li class="tab col"><a href="#EX-33-07">EX-33-07</a></li>
            <li class="tab col"><a href="#FS-040">FS-040</a></li>
            <li class="tab col"><a href="#EX-33-01" class="">EX-33-01</a></li>
            <li class="tab col"><a href="#CL-400">CL-400</a></li>
            <li class="tab col"><a href="#EX-34-01">EX-34-01</a></li>
            <li class="tab col"><a href="#FS-PA-01-9" class="">FS-PA-01-9</a></li>
            <li class="tab col"><a href="#FS-PA-02-17">FS-PA-02-17</a></li>
            <li class="tab col"><a href="#EX-33-02">EX-33-02</a></li>
            <li class="tab col"><a href="#FS-SOL-01">FS-SOL-01</a></li>
            <li class="tab col"><a href="#Ex-33-03">Ex-33-03</a></li>
            <li class="tab col"><a href="#EX-34-02" class="active">EX-34-02</a></li>
            <li class="tab col"><a href="#EX-33-04-02" class="">EX-33-04-02</a></li>              
        </ul>
        <br>
    </div>
</div>

$(document).ready(function() {
    $('.tabs').tabs({
        onShow: function(event, ui) {
        formID = $('ul.tabs li a.active').html();
        }
    });
});

Answer 1

使用swipeable : true时，您可以实现滚动（更精确地滑动而不是滚动）。您使用了class中的col，这并不是那样，您还需要提供网格的大小。

CodePen Demo of Tabs Swiping

并使用最新版本的物化cdnjs / minified脚本-

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

实现选项卡不滚动

1 个答案: