Question

刚刚提交了一个问题https://github.com/ErikGrimes/polymer_elements/issues/117。在这里再现。

我正在使用带有聚合物-ui页面的聚合物-ui-tabs，当单击选项卡时，它无法可靠地更改页面。

要重现，请使用以下代码。然后

注意到Two标签已被选中且Two页面已显示
点击Three标签，然后显示Three页面
点击Two标签。内容仍显示Three页面

重复使用从飞镖码中删除的selectedTab = 1;。现在选项卡正常工作。

polymer_tabs_issue.html

<!DOCTYPE html>
<polymer-element name="polymer-tabs-issue" attributes="selectedTab">

  <link rel="import" href="packages/polymer_ui_elements/polymer_ui_tabs/polymer_ui_tabs.html">
  <link rel="import" href="packages/polymer_ui_elements/polymer_ui_pages/polymer_ui_pages.html">
  <link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">

  <template>
    <style type="text/css">
      polymer-ui-tabs {
        width: 100%;
        height: 70px; /* not sure why need to set height */
      }
      polymer-ui-pages {
        width: 100%;
        border: 1px solid gray;
        margin: 0px 5px 5px 5px;
      }
      polymer-ui-tabs > * {
        width: 30%;
      }
    </style>

    <div style="width:100%;height:100%;">
      <polymer-layout vertical></polymer-layout>

      <div>
        <polymer-layout></polymer-layout>
        <polymer-ui-tabs selected="{{selectedTab}}">
          <span>One</span>
          <span>Two</span>
          <span>Three</span>
        </polymer-ui-tabs>
        <div flex></div>
      </div>

      <polymer-ui-pages selected="{{selectedTab}}" flex>
          <span>One</span>
          <span>Two</span>
          <span>Three</span>
      </polymer-ui-pages>      
    </div>

  </template>

  <script type="application/dart" src="polymer_tabs_issue.dart">
  </script>

</polymer-element>

的index.html

<!doctype html>

<html>
  <head>
    <title>polymer tabs issue</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="import" href="polymer_tabs_issue.html">
    <link rel="import" href="packages/polymer_elements/polymer_layout/polymer_layout.html">
  </head>
  <body>
    <polymer-layout></polymer-layout>
    <polymer-tabs-issue flex></polymer-tabs-issue>

    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

聚合物的选项卡-issue.dart

library polymer_tabs_issue;

import 'package:polymer/polymer.dart';

@CustomTag('polymer-tabs-issue')
class PolymerTabsIssueElement extends PolymerElement  {

  @published
  dynamic selectedTab;

  PolymerTabsIssueElement.created(): super.created();

  @override
  void ready() {
    selectedTab = 1;
  }

}

Answer 1

你可以试试吗

  @override
  void ready() {
    selectedTab = '1';
  }

它适用于我，但我的聚合物选择/聚合物选择剂alredy包含一些尚未公布的修改

选择的选项卡在准备就绪时初始化时，聚合物选择器不会触发选项卡选择更改

1 个答案: