Question

我正在使用Scrollable纸张标签 - 聚合物。我在选项卡上方放置了一个“下一步”按钮，我想在下一个按钮的单击时更改所选栏的位置（显示在所选选项卡底部的栏）。我是Ploymer的新手。任何帮助将不胜感激。 https://www.polymer-project.org/0.5/components/paper-tabs/demo.html

Answer 1

要更改所选条形图的位置，您可以更改纸张标签的索引选择。最好使用tabs.selectIndex（）;函数比selectNext（）;为了使更改循环：意味着一旦你到达结尾，它将选择第一个元素，依此类推，如果你提供正确的索引。

这是执行此操作的javascript函数：

    function clickAction(e) {
      var t = e.target;
      if (t.localName === 'paper-icon-button') {
         if (!t.hasAttribute('disabled')) {
            var tabs = document.querySelector('paper-tabs');
            var index = tabs.selectedIndex;
            index = index+1 == tabs.children.length ? 0 : index + 1;
            tabs.selectIndex(index);
         }
      }
    }

如果您需要一个工作样本，这是我一直在使用的样本（这是来自Polymer的官方文档，还有更多）：

<!doctype html>
<html>
<head>
  <title>paper-tabs</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <script src="webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="core-icons/core-icons.html">
  <link rel="import" href="font-roboto/roboto.html">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="core-toolbar/core-toolbar.html">
  <link rel="import" href="core-media-query/core-media-query.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">

  <style shim-shadowdom>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      margin: 0;
      padding: 24px;
      color: #333;
    }

    body.core-narrow {
      padding: 8px;
    }

    paper-tabs, core-toolbar {
      background-color: #00bcd4;
      color: #fff;
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
    }

    core-toolbar paper-tabs {
      box-shadow: none;
    }

    paper-tabs[noink][nobar] paper-tab.core-selected {
      color: #ffff8d;
    }

    paper-tabs.transparent-teal {
      background-color: transparent;
      color: #00bcd4;
      box-shadow: none;
    }

    paper-tabs.transparent-teal::shadow #selectionBar {
      background-color: #00bcd4;
    }

    paper-tabs.transparent-teal paper-tab::shadow #ink {
      color: #00bcd4;
    }

    h3 {
      font-size: 16px;
      font-weight: 400;
    }

  </style>
</head>
<body>
 <div>
    <paper-icon-button icon="arrow-forward" title="arrow-forward" onclick="clickAction(event)"></paper-icon-button>
 </div>
  <paper-tabs selected="0">
    <paper-tab>ITEM ONE</paper-tab>
    <paper-tab>ITEM TWO</paper-tab>
    <paper-tab>ITEM THREE</paper-tab>
  </paper-tabs>
  <script>
       function clickAction(e) {
        var t = e.target;
        if (t.localName === 'paper-icon-button') {
          if (!t.hasAttribute('disabled')) {
                var tabs = document.querySelector('paper-tabs');
                var index = tabs.selectedIndex;
                index = index+1 == tabs.children.length ? 0 : index + 1;
                tabs.selectIndex(index);
          }
        }
      }  
  </script>

</body>
</html>

选项卡UI中的底栏位置 - 聚合物

1 个答案: