2017-10-03 4 views
2

동적 인 json에서 데이터를 가져 오는이 동적 앰프 목록을 작동 시키려면 triyng입니다. Everithing 잘 작동하지만, A-목록이 동적이지, 그것은앰프 목록 높이가 업데이트되지 않습니다.

<amp-list class="products-category" width="auto" height="700" layout="fixed-height" [src]="myState.items" src="/dropshipping/__AMP_get_products.php" id="show-more-list"> 
    <template type="amp-mustache"> 
     <a href="{{url}}" class="tile" role="listitem"> 
      <amp-img width="130" height="130" layout="fixed" alt="{{name}}" src="{{img}}"></amp-img> 
      <div class="product_name">{{name}}</div> 
      <div class="short_description">{{description}}</div> 
      <div class="price"> 
       <span class="list-price">&euro;{{list-price}}</span> 
       <span class="sell-price">&euro;{{sell-price}}</span> 
      </div> 
     </a> 
    </template> 
</amp-list> 

<amp-state id="myState" src="/dropshipping/__AMP_get_products.php"></amp-state> 
    <form method="GET" action="/dropshipping/__AMP_get_products.php" action-xhr="/dropshipping/__AMP_get_products.php" target="_top" 
     on="submit-success: AMP.setState({ 
      myState: { items: myState.items.concat(event.response.items)}, 
      product: {index: product.index + 1, 
      hasMorePages: event.response.hasMorePages} 
     });"> 
     <input type="hidden" name="index" value="0" [value]="product.index"> 
     <input type="submit" value="Mostra altri prodotti" [class]="(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')"> 
    </form> 

https://www.nutritioncenter.it/proteine/?amp

+0

'amp-list가 의미하는 것이 동적이지 않은지, 매번로드 한 후에 변경해야합니다. ' JSON을 변경하면 클릭/새로 고침시 변경 사항을 사용할 수 있습니다. 그러나 .json 파일이 표시되지 않습니다. myState.items는 작동하지 않습니다. 또한,'src'를 저장하는 사이트는 HTTPS와 CORS가 가능해야합니다. –

+0

내 영어로는 죄송합니다. "앰프 목록 HEIGHT는 동적이지 않습니다. 새 항목이 json에서 HTML로로드되지만 앰프 목록 높이는 여전히 동일하게 유지됩니다.".. 온라인 데모를 볼 수 있습니다. 위의 링크에. 코드에 json 파일이 올바르게 지정되어 있습니다. https://www.nutritioncenter.it/dropshipping/__AMP_get_products.php HTTPS 및 CORS가 사용됩니다. –

답변

1

AMP-Live-List을 시도마다 로딩 후 변경해야합니다. AMP- 목록은 정적입니다.

+0

Ok amp-live-list는 시도했지만 예상대로 작동하지 않습니다. 그것은 타임 스탬프와 함께 작동하며이 경우에는 유용하지 않습니다. 버튼 클릭 후 고정 높이와 부드러운 스크롤로 앰프 목록을 사용하여 해결 :) 감사합니다. –

관련 문제