聚合物纸标签以编程方式选择第一个标签

Question

我们的 paper-tabs 是动态生成的，我们如何默认选择第一个 tab 并触发 change 事件以使铁页内容可见。

<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
  <template is="dom-repeat" items="[[liveQueues]]" as="queue" >
    <paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
  </template>
</paper-tabs>


 list: function() {

        this.loading=!this.loading;
        this.$.list.url = "http://apicall";
        var tmp = this.$.list.generateRequest();
        console.log(tmp)

    },

此脚本从 api 调用中获取选项卡内容

<iron-pages  selected="{{selected}}">
  <template is="dom-repeat" items="[[liveQueues]]" as="queue" >
    <paper-material elevation="1">
        <iron-list items="[[queueTokens]]" as="token">
          <template>
            <div>
              <div class="item" tabindex="0">
                <span class="avatar" >[[token.tokenNumber]]</span>
                <a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
                  <div class="pad">
                    <div class="primary">[[token.userName]]</div>
                    <div class="secondary">[[token.userMobile]]</div>
                    <div class="secondary dim">[[token.notes]]</div>
                      <div class="secondary dim">[[token.joinTime]]</div>
                  </div>
                </a>
                <iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
              </div>
            </div>
          </template>
        </iron-list>
    </paper-material>
  </template>
</iron-pages>

Answer 1

每次 dom-repeat 更改时都会触发一个事件。您可以收听更改并将 selected 设置为 0。

<template is="dom-repeat" items="[[liveQueues]]" as="queue" on-dom-change="setSelected">

在原型中定义函数。

setSelected: function() {
   this.$.scrollableTabs.selected = 0;
} 

请注意，每次更新 liveQueues 时都会调用该函数，并且您可能不想每次都重置选项卡。 如果你有数据绑定到selected，那么铁页应该会自动更新。

Answer 2

好吧，我认为ready函数是初始化的方式！

ready: function() {
  this.selected = 0;
}