聚合物选择器不会激活选项卡选项更改

聚合物选择器不会激活选项卡选项更改

关注
发信
关注(28)粉丝(399)

当选中的选项卡初始化就绪时，聚合物选择器不会激活选项卡选项更改

本文介绍了当选中的选项卡初始化就绪时，聚合物选择器不会激活选项卡选项更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

刚提出问题。在这里复制。



我使用的是一个polymer-ui-tabs与一个聚合物ui页面，它不能可靠地更改页面，当一个标签页。 / p>

要复制使用下面的代码。然后




  • 观察到选择了两个选项卡， 三页面显示两个页面

    选项卡并显示三页


  • 点击 选项卡。内容仍然显示三页




selectedTab = 1; 从dart代码中删除。



$ b 

 <！DOCTYPE html> 
< polymer-element name =polymer-tabs-issueattributes =selectedTab> 
 
< link rel =importhref =packages / polymer_ui_elements / polymer_ui_tabs / polymer_ui_tabs.html> 
< link rel =importhref =packages / polymer_ui_elements / polymer_ui_pages / polymer_ui_pages.html> 
< link rel =importhref =packages / polymer_elements / polymer_layout / polymer_layout.html> 
 
< template> 
< style type =text / css> 
 polymer-ui-tabs {
 width：100％; 
 height：70px; / *不确定为什么需要设置高度* / 
} 
 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>一个< / span> 
< span>两个< / span> 
< span>三< / span> 
< / polymer-ui-tabs> 
< div flex>< / div> 
< / div> 
 
< polymer-ui-pages selected ={{selectedTab}}flex> 
< span>一个< / span> 
< span>两个< / span> 
< span>三< / span> 
< / polymer-ui-pages> 
< / div> 
 
< / template> 
 
< script type =application / dartsrc =polymer_tabs_issue.dart> 
< / script> 
 
< / polymer-element>

index.html 

 <！doctype html> 
 
< html> 
< head> 
< title>聚合物标签问题< / title> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge，chrome = 1> 
< link rel =importhref =polymer_tabs_issue.html> 
< link rel =importhref =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>

polymer-tabs-issue.dart 

  library polymer_tabs_issue; 
 
 import'package：polymer / polymer.dart'; 
 
 @CustomTag（'polymer-tabs-issue'）
类PolymerTabsIssueElement扩展PolymerElement {
 
 @published 
 dynamic selectedTab; 
 
 PolymerTabsIssueElement.created（）：super.created（）; 
 
 @override 
 void ready（）{
 selectedTab = 1; 
} 
 
}


解决方案

您可以试试

  @override 
 void ready b $ b selectedTab ='1'; 
}

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


Just filed an issue https://github.com/ErikGrimes/polymer_elements/issues/117. Reproducing here.

I'm using a polymer-ui-tabs with a polymer-ui-pages and it doesn't reliably change the page when a tab clicked.

To reproduce use the code below. Then

  • observe that the Two tab is selected and the Two page is shown

  • click on the Three tab is selected and the Three page is shown

  • click on the Two tab. The content still shows the Three page

Repeat with the selectedTab = 1; removed from the dart code. Now the tabs work correctly.

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>

polymer-tabs-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;
  }

}
解决方案

can you please try

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

It worked for me but my polymer-selection/polymer-selector alredy contain some modifications not yet published

这篇关于当选中的选项卡初始化就绪时，聚合物选择器不会激活选项卡选项更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-30 16:33
Powered by LMLPHP ©2024 聚合物选择器不会激活选项卡选项更改 0.036373