'종이 탭'을 클릭 할 때까지 페이지가 표시되지 않습니다.

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

당신은 속성으로보다는 {value: 0}의 값을 속성으로 직접 selectedForm를 지정하고 있습니다 :

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

. Polymer: Declared Properties