Q&A前提・実現したいこと
Laravel初心者です。
今回、Laravel 8 + Livewireでクイズアプリを作っています。
(Larabel 8 + JetStreamのインストールでLivewireを選択しました)
クイズアプリのページ遷移は、以下のような動きです。
問題画面->解答画面->問題画面->解答画面->・・・(問題と解答を繰り返す)・・・->結果点数画面
ステータス変数に応じて画面を切り替え表示しています.
発生している問題・エラーメッセージ
ここで困っているのが、問題画面でスクロールして解答画面に遷移すると、画面トップから表示されず、前の問題画面でのスクロール位置で表示されてしまう点です。
以下で同様の問題をみつけましたが解決には至っていないようです。
scroll to top of page - livewire component - alpine js
Reactでの解決方法は、
・スクロールトップ用のコンポーネントをつくる
・作ったコンポーネントでラップする
となっているので、LivewireでもAlpineJSを使って同じようなことをすれば良いのかと、Livewire公式ドキュメントを確認してみましたが、どうすれば良いか分からずに途方にくれております。
該当のソースコード
views/layouts/quizframe.blade.php
Blade
1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>クイズ</title> 7 @livewireStyles 8 <link href="{{ mix('css/app.css') }}" rel="stylesheet"> 9</head> 10<body> 11 <main class="main"> 12 <div class="holder"> 13 @livewire('quiz') 14 </div> 15 </main> 16 @livewireScripts 17 <script src="{{ mix('js/app.js') }}"></script> 18</body> 19</html>
views/livewire/quiz.blade.php
Blade
1{{-- 問題画面 --}} 2@if($flow == 'ques') 3 <div class="holder-inner question"> 4 ここに問題を表示（この部分がスクロールが必要になるほど長い） 5 選択問題で選択肢をクリックで解答画面へ 6 <ul> 7 <li wire:click="checkAnswer(選択肢Aのid)">選択肢A</li> 8 <li wire:click="checkAnswer(選択肢Bのid)">選択肢B</li> 9 </ul> 10 </div> 11@endif 12 13{{-- 解答画面 --}} 14@if($flow == 'answer') 15 <div class="holder-inner answer"> 16 ここに解答を表示 17 （この部分も解説文あり、スクロールが必要になるほど長い） 18 @if($num < 5) 19 <button wire:click="showQuestion">つぎの問題へ</button> 20 @else 21 <button wire:click="showResult">結果をみる</button> 22 @endif 23 </div> 24@endif 25 26{{-- 結果画面 --}} 27@if($flow == 'result') 28 <div class="holder-inner result"> 29 ここに結果を表示 30 </div> 31@endif 32
php
1<?php 2namespace App\Http\Livewire; 3 4use Livewire\Component; 5use App\Models\Question; 6use App\Models\Choice; 7 8class Quiz extends Component 9{ 10 public $flow; // 画面ステータス 11 12 public function mount() 13 { 14 $this->resetQuiz(); 15 $this->showQuestion(); 16 } 17 18 public function render() 19 { 20 return view('livewire.quiz') 21 ->layout('layouts.quizframe'); 22 } 23 24 public function resetQuiz() 25 { 26 // プロパティを初期化 27 } 28 29 public function showQuestion() 30 { 31 $this->flow = 'ques'; 32 // 問題を取得 33 } 34 35 public function checkAnswer($id) 36 { 37 $this->flow = 'answer'; 38 // 採点 39 } 40 41 public function showResult() 42 { 43 $this->flow = 'result'; 44 } 45}
ご教授いただけると助かります。
どうぞよろしくお願いします。
回答1件
0
自己解決
Livewireのブラウザイベントのディスパッチを使って自己解決出来ました。
質問で記していたQuizコンポーネントのレンダーでブラウザウィンドウイベントを発生させます。
php
1public function render() 2{ 3 $this->dispatchBrowserEvent('scroll-top'); 4 return view('livewire.quiz') 5 ->layout('layouts.quizframe'); 6}
BladeファイルでJavaScriptを使用してこのウィンドウイベントをリッスンしたら、上手くいきました。
views/livewire/quiz.blade.php
Blade
1<script> 2 window.addEventListener('scroll-top', event => { 3 window.scrollTo(0,0); 4 }) 5</script>
投稿2022/01/04 20:58
総合スコア31
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。