Question

移动视图和materializecss存在问题。简而言之，在桌面上我的代码（见下文）工作正常。如果我运行dev tools（F12）并选择CTRL+SHIFT+M /切换设备工具栏（以模拟移动设备视图）按钮，此视图中的按钮将停止工作（它应该将您移动到另一个选项卡）。任何解决方案？

广泛的问题演示：https://share.viewedit.com/QFQ7LrdFW8iXXzJ2ZWbzSs

工作示例：https://codepen.io/anon/pen/VzKYEx

<div class="row">
    <div class="col s12">
        <ul class="tabs ">
            <li class="tab col s3"><a href="#connect">x1</a></li>
            <li class="tab col s3"><a href="#login">x2</a></li>
            <li class="tab col s3"><a href="#register">x3</a></li>
        </ul>
    </div>
    <div id="connect" class="col s12">
        <div class="valign-wrapper center-align" id="connect" data-section="connect">
    <div class="valign">
        <div class="container">

            <img class="logo" src="{{ asset('assets/images/logo.png') }}" alt="logo dimesion">
            <div class="buttons">
                <div class="row">
                    <div class="input-field col s10 push-s1">
                        <button class="btn waves-effect waves-light btn-large btn-orange btn-block"
                                data-show-tab="login"
                                type="button"
                                name="action">go_to_x2</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
    <div id="login" class="col s12">
        x2
    </div>
    <div id="register" class="col s12">
        x3
    </div>
</div>

JS：

var $page = $('body');
var $tabs = $page.find('ul.tabs');
$tabs.tabs({swipeable: true});

    $page.find('[data-show-tab]').on('click', (e) => {
        var tab = $(e.target).attr('data-show-tab');
        $tabs.tabs('select_tab', tab);
    });

SCSS：

@import 'compass/css3';

.valign-wrapper {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  position: absolute;

  & .valign {
    width: 100%;

    &.height100 {
      height: 100%;
    }
  }

  &#connect {
    background-color: white;
    color: black;

    & .logo {
      position: absolute;
      margin: auto auto;
      top: 20vh;
      left: 0;
      right: 0;
    }

    & .buttons {
      bottom: 40px;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }
}

.carousel {
  height: 100% !important;
  position: absolute;

  & .carousel-item {
    height: 100%;
  }
}

Answer 1

看来这是materializecss中的一个错误，标签？

无论如何，部分解决方案是禁用选项卡上的swipeable。

$tabs.tabs({swipeable: false})

Answer 2

您必须更换＆＃34; materialize.js＆＃34;

中的代码

function setupEvents() {
      if (typeof window.ontouchstart !== 'undefined') {
        view[0].addEventListener('touchstart', tap);
        view[0].addEventListener('touchmove', drag);
        view[0].addEventListener('touchend', release);
      }
      view[0].addEventListener('mousedown', tap);
      view[0].addEventListener('mousemove', drag);
      view[0].addEventListener('mouseup', release);
      view[0].addEventListener('mouseleave', release);
      view[0].addEventListener('click', click);
    }
}

Materializecss - 带有按钮的标签不在移动设备上工作

2 个答案: