前提・実現したいこと
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
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>クイズ</title> @livewireStyles <link href="{{ mix('css/app.css') }}" rel="stylesheet"> </head> <body> <main class="main"> <div class="holder"> @livewire('quiz') </div> </main> @livewireScripts <script src="{{ mix('js/app.js') }}"></script> </body> </html>
views/livewire/quiz.blade.php
Blade
{{-- 問題画面 --}} @if($flow == 'ques') <div class="holder-inner question"> ここに問題を表示(この部分がスクロールが必要になるほど長い) 選択問題で選択肢をクリックで解答画面へ <ul> <li wire:click="checkAnswer(選択肢Aのid)">選択肢A</li> <li wire:click="checkAnswer(選択肢Bのid)">選択肢B</li> </ul> </div> @endif {{-- 解答画面 --}} @if($flow == 'answer') <div class="holder-inner answer"> ここに解答を表示 (この部分も解説文あり、スクロールが必要になるほど長い) @if($num < 5) <button wire:click="showQuestion">つぎの問題へ</button> @else <button wire:click="showResult">結果をみる</button> @endif </div> @endif {{-- 結果画面 --}} @if($flow == 'result') <div class="holder-inner result"> ここに結果を表示 </div> @endif
php
<?php namespace App\Http\Livewire; use Livewire\Component; use App\Models\Question; use App\Models\Choice; class Quiz extends Component { public $flow; // 画面ステータス public function mount() { $this->resetQuiz(); $this->showQuestion(); } public function render() { return view('livewire.quiz') ->layout('layouts.quizframe'); } public function resetQuiz() { // プロパティを初期化 } public function showQuestion() { $this->flow = 'ques'; // 問題を取得 } public function checkAnswer($id) { $this->flow = 'answer'; // 採点 } public function showResult() { $this->flow = 'result'; } }
ご教授いただけると助かります。
どうぞよろしくお願いします。
まだ回答がついていません
会員登録して回答してみよう