【Bubble】現在のページにGo to pageしてページロードっぽくする方法
こんにちは、ノーコード部の茂住です。
Bubbleで開発している時、今いるページと同じページに画面遷移しようとして困ったことはありませんか？
BubbleのGo to pageアクションで今いるページに遷移すると、遷移後に表示させる位置がクリックした位置のままでページトップになりません。
上の例では本の詳細ページ内に別の本のリストがあり、リストの本をクリックするとその本の詳細画面に遷移するというものです。クリックして詳細画面に表示する本のデータは切り替わっていますが、画面の位置がそのままなので分かりにくいですね。
実はgo to pageのアクションはそのworkflowで最後にしないといけない制約があり、go to pageの後にページのリフレッシュができないので意外と解決が難しかったりします。
今回は同じページに遷移した時でもページをロードしたかのようにいい感じにページトップを表示する方法ついて解説します。
今回は以下の手順で実装を行います。
1.ロード中にコンテンツを隠すエレメントを作成する
2.ページ遷移と同時にページトップにスクロールさせる
3.スクロールバーをCSSで整える
1.ロード中にコンテンツを隠すエレメントを作成する
ページのコンテンツの切り替えが完了するまでページの内容を隠すエレメントを詳細ページないにfloating groupで作成します。ページ内のコンテンツを隠せるように背景を設定します。お好みでページロード中と分かるようにロードのアイコンを設置しても良いと思います。今回は「Animated Loaders」というプラグインを使用します。このfloating elementは特定条件でしか表示させたくないので「This element is visible on page loaded」をoffにします
2.ページ遷移と同時にページトップにスクロールさせる
以下の手順で「Go to page」するタイミングでページトップにスクロールし、スクロールしている間だけ先ほどのfloating groupを表示させるという処理を作成します。
⑴ リストのアイテムをクリックしてGo to pageする時、「Send more parameters to the page」で送信するパラメータを作成します。命名は適当で構いません。今回は「scroll」＝「yes」という形でパラメータを送信します。
⑵ ページロード時に⑴のパラメータがあるときに実行される以下の処理を作成します。
・step1：ページロード時エレメントを表示
・step2：ページトップにスクロールさせる
Step1,2共に「Get data from page URL」で「scroll」が「yes」ならば実行するようにしてあります。
⑶ スクロールがトップになった時点でページロードのエレメントを隠す処理を作成します。新規event作成から「Do when condition is true」を選択し、「Run this」を「Every time」、条件を「Get data from page URL」で「scroll」が「yes」かつ、ページロードのエレメントがvisibleの時としていします。
中にはページロードのエレメントを隠すアクションを追加すればOKです(step2)。このままでも良いですが、スクロールが早く終わるとfloating groupの表示・非表示の切り替えが早すぎで変に見える場合があります。step1ではあえて「Add a pause before next action」で時間を入れることで調節しています。
3. スクロールバーをCSSで整える
ここまでで大体の処理は完了しました。しかし、このままだと画面右にあるスクロールバーが勝手に動くので見た目があまり良くないかもしれません。その場合CSSを当ててスクロールバーを非表示にします。画面内の適当な場所にHTMLエレメントを配置して以下の入力します。こうすることでスクロールバー非表示になりより自然な見た目になります。
<style type="text/css">
::-webkit-scrollbar {
display:none;
}
</style>
まとめ
今回は同じページにGo to pageした際にページのトップをいい感じに表示する方法について解説しました。Go to pageアクションは画面遷移だけでなく今いるページのパラメータを操作することもできるので応用次第でいろんなことができそうです。
この記事が気に入ったらサポートをしてみませんか？