Question

我们的纸质标签是动态生成的，我们如何默认选择第一个标签，同时触发更改事件，以便可以看到铁页内容。

<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更改时都会触发一个事件。您可以收听更改并将所选内容设置为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;
}

Polymer paper-tab以编程方式选择第一个选项卡

2 个答案: