دانیال مبینی
1 سال پیش توسط دانیال مبینی مطرح شد
1 پاسخ

قسمت فیلترنیگ دوره های آموزشی راکت

سلام خدمت برنامه نویسان عزیز.
دوستان داشتم توی سایت راکت گشت و گذار میکردم یه قسمت باحال به چشمم خورد.
قسمت ******** دوره های آموزشی همون اول ۱۲ دوره نشون میده بعد که اسکرول میکنی به پایین خود به خود ajax میزنه و دوره های بیشتری نشون میده😍
این خود به خوده رو چجوری نوشتن؟ با js یا لایووایر ؟

  • اگه کسی میدونه با js چجوری میشه اینو نوشت راهنمایی کنه..🤗
  • اگه کسی میدونه با لاایووایر چجوری میشه اینو نوشت راهنمایی کنه....🤩🤗

ثبت پرسش جدید
سینا شاه‌اویسی
تخصص : برنامه نویس فرانت اند
@sinashahoveisi 1 سال پیش مطرح شد
3

به این حرکت میگند 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();
    }
});

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام