問題タブ [polymer-elements]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - ネストされたヘッダー バー効果を実現するにはどうすればよいですか?
PolymerでSPAを開発しています。私のメインレイアウトは、app-layout
セットを使用してヘッダーバーとその下にスクロール可能なページを作成します-したがって
私のページの 1 つは、予定の概要を表示して予約するために使用される大きな月間カレンダーです。予約に使用すると、選択した日の予約に関する重要な情報がその上に大量に表示されます。通常の画面では、カレンダーの最後の数週間が画面の下部から消え、ページがスクロール可能になります。
これの構造はその<page-element>
ようなものです
このページで達成したいこと (メイン アプリのツールバーは画面の上部に固定されていることを思い出してください) は、
- class="day" のセクションは、画面上部 (メイン アプリ ツールバーの下) で静的なままです。
- ユーザーが完全になくなるまでページを下にスクロールすると、カレンダー ヘッダーの選択が折りたたまれます
<app-header>
。 - ページの残りの部分であるカレンダー自体が上下にスクロールし、ユーザーが完全に下にスクロールしたときに、その月の最後の週がページのちょうど一番下になるようにします。
- class="day" のセクションが存在しない場合 (つまり、誰かがカレンダーを表示しているだけで、高さが 0 になるまで折りたたまれますが、ページの残りの部分は上記のように動作しますが、ビューポートが大きくなります。
ネストされたものを使用し<app-header-layout>
てみましたが、アプリのツールバーが残っているようで、カレンダーの下部が画面の残りの部分を占めており、スクロールできません。そのため、ポリマー要素を使用するか、css を使用して自分で行うかのいずれかで、これを達成する方法についてのアドバイスを探しています。
アップデート
を使用してみpaper-scroll-header-panel
ましたが、すべてが見えなくなりました。クロム開発ツールのように、さまざまな要素がページの正しい位置に配置されたのに、表示されず、理由がわかりませんでした。
また、カレンダー コンテナー要素を に設定しようとしoverflow-y: scroll
ましたが、最終的に 2 つの垂直スクロール バーが表示され、外側のスクロール バー (アプリ レベル 1) のみが機能しました。scrollTarget
この実験は、私がon で遊んでみるべきかどうか迷っていますapp-header
firebase - firebase-query データが (JSON のより深いレベルで) 直接公開されていない場合、通知の変更を強制する必要がありますか?
firebase の 3 レベル構造にいくつかのデータがあります。Polymerfire の firebase-query 要素を使用して、簡単にデータを取得し、必要なものを抽出できます。しかし、第 3 層のデータを変更しても、Polymer のデータ バインディング機能を利用しているため、iron-list にそれが反映されると期待しても何も起こりません。
クエリパスがデータを変更している直接のレベルであり、すべて正常に動作する場合に、正常に動作する他のインスタンスがあります。
このスレッドに出くわしました。firebase -query にこの問題があるようです。解決されているかどうかは疑問ですが、そうでない場合は、変更のみを取得する簡単な方法を教えていただければ幸いです。現在、リンクに示されているパスを使用していますが、かなり面倒です。ありがとう。
「読みやすくするために関係のないものは削除しました」
ここに私のデータ構造があります:
ここで、データを iron-list にバインドします。
html - アイアンリストのメインの親に関してすべての子アイテムをスタイルするにはどうすればよいですか?
シンプルな<div>
中身のアイアンリストがあります。アイアンリストがデータの配列を反復するとき、各インスタンスをメインのアイアンリストの先頭に対してスタイル設定したいのです<div>
が、何を試しても(絶対スタイルと相対スタイルの組み合わせ)、うまくいかないようですそれを機能させます。誰かがこれを達成するのを手伝ってくれれば幸いです。以下は関連するコードです。
子のサイズが変更されると、その子のみが鉄のリストの上部に対して正しく再配置されますが、ページを更新すると、参照は上部ではなくその上の最後の子に変更されるようです。
html - メイン要素の上に div (まだリスト内にある) があるのに、鉄のリスト項目がリセットされないのはなぜですか?
その入力データをアイアンリストに変更するイベントが発生したときに再配置したいオブジェクトの束を含むアイアンリストがあります。各オブジェクトがリストの先頭を参照する必要がありますが、その解決策はまだ見つかりません。それらを絶対オブジェクトのように動作させる唯一の方法は、以下に示すように、メイン項目の前に div を配置することです。しかし、データを変更すると、アイテムの数は同じままで、一部 (配列内の新しい要素と同じ数) だけが再配置されます。以前のデータからさらに項目が残っている場合、データから読み取る高さをバインドしているにもかかわらず、それらはそのままの場所に残ります。