如何向 Laravel 项目插入无限滚动

Question

我对 Laravel 中使用的 Jquery 和 Ajax 非常陌生，并且一直在尝试在我的项目中实现无限滚动，但我不知道从哪里开始

控制器：

$books= DB::table('books')->where('status', 'post')->orderBy('created_at', 'DESC')->paginate(15);

   if ($books->isEmpty())
   {
     $books= null;

     return view('landingpage')->withBooks($books);
   }
   return view('landingpage')->withBooks($books);

景色

   @if ($books== null)

            <center><p class="paragraph"> Be the first to share your shopping experience <a href="{{ route('testimonials.create') }}" style="color:#9e0101;"> here</a></p></center>

        @else


        <div class="row mt-0"> <div class="infinite-scroll"> @foreach ($books as $item)
            <div class="col-lg-4 mt-3">
                <p class="paragraph"> <sup><i class="fa fa-quote-left" style="font-size:5px" aria-hidden="true"></i></sup>{{$item->title}}<sup><i class="fa fa-quote-right" style="font-size:5px" aria-hidden="true"></i></sup> </p>
                <img src="../images/{{$item->rate}}.png" style="width:50%" alt="Image">
            <h2 style="font-size:18px">{{$item->firstname}} {{$item->lastname}}</h2> </div>@endforeach </div>{{$books->links()}}</div>

                @endif

JS

<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
    $('.infinite-scroll').jscroll({
        autoTrigger: true,
        loadingHtml: '<img class="center-block" src="images/loading.gif" alt="Loading..." />',
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: 'div.infinite-scroll',
        callback: function() {
            $('ul.pagination').remove();
        }
    });
});

任何帮助将不胜感激

Answer 1

我使用ajax进行无限滚动，这是示例：

查看方法：

public function index(){
        return view('index');
    }

通过ajax获取数据的方法：

public function ajaxData(Request $request)
    {
        $post_query = Trends::query()
            ->where('is_offer', '!=', 1)
            ->where('direct_to', null)
            ->orderBy('id', 'desc')
            ->paginate(12);

        $data['post_list'] = $post_query;


            if ($data['post_list']->count() > 0) {            
                $ajax_data['post'] = true;
                $ajax_data['next_url'] = $data['post_list']->nextPageUrl();
                $ajax_data['next_data'] = $data['post_list'];

            } else {
                $ajax_data['html'] = false;
                $ajax_data['post'] = false;
                $ajax_data['next_url'] = $data['post_list']->nextPageUrl();
            }
            return response()->json($ajax_data);
    }

这是我在 Blade 中的脚本

var loaddataUrl = '{!! route('explore-ajax-data',array_merge(request()->all())) !!}';
        var nextData = true;
        $(document.body).on('touchmove', onExploreScroll); // for mobile
        $(window).on('scroll', onExploreScroll);

        function onExploreScroll() {
            if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9) {
                if (nextData) {
                    nextData = false;
                    loadMoreData();
                }
            }
        }
        function loadMoreData() {
            $.ajax({
                type: 'GET',
                url: loaddataUrl,        

                success: function (data) {                        
                    if (data.next_url) {
                        loaddataUrl = data.next_url;
                        console.log(data.next_data);
                        nextData = true;
                    } else {
                        nextData = false;
                    }
                },
                error: function (data) {
                    nextData = true;
                }
            })
        }

route(explore-ajax-data)

映射到

public function ajaxData(Request $request)

我的路线是：

// this will display home page or home view
Route::get('home', 'HomeController@index')->name('home');

// this is for ajax request.
Route::get('ajax/explore-data', 'HomeController@ajaxData')->name('explore-ajax-data');

教程链接