سلام خدمت برنامه نویسان عزیز.
دوستان داشتم توی سایت راکت گشت و گذار میکردم یه قسمت باحال به چشمم خورد.
قسمت ******** دوره های آموزشی همون اول ۱۲ دوره نشون میده بعد که اسکرول میکنی به پایین خود به خود ajax میزنه و دوره های بیشتری نشون میده😍
این خود به خوده رو چجوری نوشتن؟ با js یا لایووایر ؟
به این حرکت میگند infinite scroll که توی این ویدیو میتونید مثالش رو ببینید
// Your Livewire Component (e.g., InfiniteScrollComponent.php)
use Livewire\Component;
use App\Models\Post; // Replace with your data model
class InfiniteScrollComponent extends Component
{
public $posts = [];
public $page = 1;
public $perPage = 10;
public function loadMore()
{
$this->page++;
$newPosts = Post::paginate($this->perPage, ['*'], 'page', $this->page)->items();
$this->posts = array_merge($this->posts, $newPosts);
}
public function render()
{
return view('livewire.infinite-scroll-component');
}
}
<!-- livewire/infinite-scroll-component.blade.php -->
<div>
@foreach ($posts as $post)
<!-- Render your post data here -->
@endforeach
@if ($posts->hasMorePages())
<div wire:click="loadMore" wire:loading.remove>
Load More
</div>
<div wire:loading>
Loading...
</div>
@endif
</div>
// resources/js/infinite-scroll.js
window.addEventListener('scroll', function () {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
@this.loadMore();
}
});
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟