在 Bootstrap 模式中实现无限滚动？

Question

我正在尝试在 Bootstrap 模式中实现无限滚动。 我尝试了几个无限滚动库，但没有一个在模态中工作过。

这是我的代码现在的样子。

当模态打开时，jQuery 侦听事件并从服务器请求数据：

$(document).on('show.bs.modal', '#modal', function(event)
{
    var modal = $(this);
    var modalBody = modal.find('.modal-body');

    $.ajax({
        url: '/messages',
        type: 'post',
        dataType: 'json'
        success: function(data)
        {
            // Append the rendered view to the modal body
            modalBody.append(data.data.view);
        }
    });
});

这是它从中检索消息的getData()方法：

public function getData()
{
    $messages = Message::paginate(10);

    return response()->json([
        'success' => true,
        'data' => [
            'view' => view('layouts.messages', ['messages' => $messages])->render()
        ]
    ], 200);
}

这是我的layouts.messages刀片文件：

<div class="messages-container">
    @foreach ($messages as $message)
        <div class="message">{{ $message->text }}</div>
    @endforeach
</div>

{{ $messages->links() }}

最后，模态看起来像这样：

<div class="modal fade" id="modal" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
            <div class="messages-container">
                @foreach ($messages as $message)
                    <div class="message">{{ $message->text }}</div>
                @endforeach
            </div>

            {{ $messages->links() }}
         </div>
      </div>
   </div>
</div>

如您所见，我需要在每次加载时向.content-container附加更多数据。

从这里开始，我如何实现模态的无限滚动，以便如果用户向下滚动到模态的底部，它会从服务器加载下一页并将其附加到模态主体？

Answer 1

一个快速的谷歌搜索结果： http : //jscroll.com/

它特别提到了通过 Ajax 加载数据的能力。