laravel AlpineJS加载更多动画

nfs0ujit  于 2023-03-31  发布在  其他
关注(0)|答案(1)|浏览(173)

我遇到了一个问题,当我将索引设置为10并递增10时,加载更多动画不会被激发,然而,如果我切换索引为9,增量为9,它运行得很好。在后端总共有20个,所以理想情况下,页面上开始有10个,你可以通过点击按钮加载额外的10个或更多。我希望有人能帮助我理解为什么十个不起作用,但九个起作用:

<div x-data="{ show: false, index: 10 }">
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-5 gap-4 md:gap-6 lg:gap-6 mt-4">
    @foreach($tributes as $tribute)
        <div class="gallery-border p-8" x-show="show && index > {{$loop->index}}" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
            <p class="text-2xl md:text-4xl lg:text-4xl">{{ $tribute->message }}</p>
            <p class="text-sm">-{{ $tribute->name }}</p>
        </div>
    @endforeach
</div>
@if(count($tributes) < $totalTributes)
    <div class="text-center mt-4">
        @if($totalTributes - count($tributes) < 10)
            <button x-on:click="show = true; index = index + {{$totalTributes - count($tributes)}}; $wire.loadMore()" x-init="setTimeout(() => { show = true }, 500)" class="tributes-gallery-load-more">Load More</button>
        @else
            <button x-on:click="show = true; index = index + 10; $wire.loadMore()" x-init="setTimeout(() => { show = true }, 500)" class="tributes-gallery-load-more">Load More</button>
        @endif
    </div>
@endif
<?php

namespace App\Http\Livewire;

use App\Models\Tribute;
use Livewire\Component;

class TributeGallery extends Component
{
    public $tributes, $totalTributes;
    public $perPage = 10;
    public $page = 1;

    public function loadMore()
    {
        $this->page++;
        $newTributes = Tribute::where('status', 'approved')
                              ->orderBy('id', 'desc')
                              ->skip(($this->page - 1) * $this->perPage)
                              ->take($this->perPage)
                              ->get();

        $this->tributes = $this->tributes->concat($newTributes);

    }

    public function mount()
    {
        $this->totalTributes = Tribute::where('status', 'approved')->count();
        $this->tributes = Tribute::where('status', 'approved')
                                  ->orderBy('id', 'desc')
                                  ->take($this->perPage)
                                  ->get();

    }

    public function render()
    {

        return view('livewire.tribute-gallery');
    }
}
rks48beu

rks48beu1#

在第一个页面加载时,延迟半秒,将show切换到true。您永远不会将此变量切换回false,因此后续加载始终满足x-show条件的一半。index从10开始,当您首先单击“加载更多”按钮时,index变量将增加10,所以现在它的20和show仍然是true。之后您调用$wire.loadMore()加载下一个批次。但是由于您已经增加了index变量,并且show仍然是true,因此当Livewire加载下一个批次时,x-show="show && index > {{$loop->index}}"条件已经满足,所以Alpine.js不会触发过渡动画,因为过渡不会发生。
现在的解决办法很简单:首先加载下一个批次,然后增加index变量(可选地,具有小延迟),因此对于新项目,x-show条件可以从false更改为true,因此也可以发生转换。show变量是冗余的,可以删除。

<div x-data="{ index: 0 }">
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-5 gap-4 md:gap-6 lg:gap-6 mt-4">
    @foreach($tributes as $tribute)
        <div class="gallery-border p-8" x-show="index > {{$loop->index}}" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
            <p class="text-2xl md:text-4xl lg:text-4xl">{{ $tribute->message }}</p>
            <p class="text-sm">-{{ $tribute->name }}</p>
        </div>
    @endforeach
</div>
@if(count($tributes) < $totalTributes)
    <div class="text-center mt-4">
      <button x-on:click="$wire.loadMore(); setTimeout(() => { index = index + 10 }, 500)" class="tributes-gallery-load-more">Load More</button>
    </div>
@endif
</div>

相关问题