标签面板可以在移动视图中滑动吗？答案

【问题标题】：Tab panels swipe-able in mobile view?标签面板可以在移动视图中滑动吗？
【发布时间】：2016-10-25 11:02:50
【问题描述】：

我有一个选项卡式菜单，我希望选项卡式菜单（ul class="tabs"）在移动视图中可以滑动。

编辑：我发现了一个关于使用 Slick JS 的 sn-p，我从不知道这个 JS，但我希望它在我当前的选项卡上应用这个 codepen菜单。

如何与我当前的标签式菜单正确结合？我尝试将它结合起来，但我的选项卡式菜单的当前 UI 设计变得一团糟。

这是我的标签式菜单codepen

<section class="wrapper">
<ul class="tabs">
   <li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
   <li class="active">
      <div id="tab1" class="content__wrapper">
      </div>
   </li>

【问题讨论】：

标签： javascript jquery responsive-design swipe slick.js

【解决方案1】：

如果您只想在菜单上水平滑动以显示在视口中不可见的任何其他导航项，您可以使用 css 来做到这一点。

@media screen and (max-width: 768px) {
  .tabs {
    overflow-x: scroll;
    white-space: nowrap;
  }
}

【讨论】：

我需要滑动标签式菜单而不是滚动抱歉

【解决方案2】：

使用jquery.mobile。这非常适合您的目的。我写了一个它是如何工作的示例。您接下来要做的是将滑动事件与单击选项卡绑定。我建议您使用next() 向右滑动，prev() 向左滑动以定位选项卡。

查看此示例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("swipeleft",function(){
   alert('swiped left');
  });
   $("p").on("swiperight",function(){
   alert('swiped right');
  });
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  </div>

  <div data-role="main" class="ui-content">
    <p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>

  </div>

  </div>

</body>
</html>

【讨论】：

@User014019 如果这对您有帮助，请告诉我
我用你的代码更新了codepen，但选项卡式菜单不可滑动，文本重叠。 codepen.io/anon/pen/wzOPrL