javascript - 单击 'paper-tabs' 后页面才会显示

Question

在单击纸张选项卡之前，我的滑动页面不会显示。

我没有使用 template[is="dom-bind"] 方法,,,

我试图让它在 Polymer({ is: ... 脚本中工作(不确定这是否正确)

这是我现在所拥有的:

    <!--
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
        Forms (page)
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
    <link rel="import" href="../../bower_components/polymer/polymer.html">
    <link rel="import" href="../../bower_components/iron-swipeable-pages/iron-swipeable-pages.html">

    <link rel="import" href="../components/component-page.html">
    <link rel="import" href="forms-contact.html">
    <!-- <link rel="import" href="forms-rebuild.html"> -->


    <dom-module id="page-forms">
    <template>

        <style>
        :host {
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background: #fff;
        }

        iron-swipeable-pages { z-index: 1; }
        iron-swipeable-pages > * {
            padding: 2rem;
            -webkit-user-select: none;  /* Chrome all / Safari all */
            -moz-user-select: none;     /* Firefox all */
            -ms-user-select: none;      /* IE 10+ */
            user-select: none;          /* Likely future */
            cursor: default;
        }
        forms-contact {  }
        .page { height: 100%; }

        </style>


    <!--  Content
    ---------------------------------------------------------------------------------------------------------------->
        <component-page grid="vertical" layout="start-center" padding-t="20" min-height="1">

            <!-- Select Menu -->
            <paper-tabs selected="{{selectedForm}}" mobile-width=".9"
                                                    tablet-width=".75"
                                                    desktop-width=".5">
                        <paper-tab>
                            <iron-icon icon="communication:forum"></iron-icon>
                            Contact Form
                        </paper-tab>

                        <paper-tab>
                            <iron-icon icon="icons:settings"></iron-icon>
                            Rebuild Form
                        </paper-tab>
            </paper-tabs>


            <iron-swipeable-pages on-selected-changed="_onSelectedChanged" selected="{{selectedForm}}" flex="auto" width="100" show-arrow>

                        <!-- Contact Form -->
                        <div class="page" grid="vertical" layout="start-center">
                            <forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact>
                        </div>

                        <!-- Contact Form -->
                        <div class="page" grid="vertical" layout="start-center">
                            <forms-contact mobile-width=".9" tablet-width=".75" desktop-width=".5"></forms-contact>
                        </div>
            </iron-swipeable-pages>

            <fx-skew bg="white"></fx-skew>
        </component-page>
    <!--  Content
    ---------------------------------------------------------------------------------------------------------------->

    </template>



    <script>

        Polymer({
          is: "page-forms",

          selectedForm: {
                    value: 0
                  },

          _onSelectedChanged: function(e) {

              var target = e.target;
              target.isGesture ? console.log("Swiped by Gesture!") : console.log("Swiped by Selection!");
          }

        });

    </script>
    </dom-module>

Answer 1

您将 selectedForm 直接指定为值为 {value: 0} 的属性，而不是属性:

      Polymer({
          is: "page-forms",
          properties: {
              selectedForm: {type: Number, value: 0},
          },
      });

比照。 Polymer: Declared Properties