我遇到了一个问题,当我将索引设置为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');
}
}
1条答案
按热度按时间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
变量是冗余的,可以删除。