laravel 在 Bootstrap 模式中实现无限滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44426506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Implementing infinite scroll in Bootstrap modal?
提问by user498641
I'm trying to implement infinite scroll in a Bootstrap modal. I've tried several infinite scroll libraries but none of them have worked within a modal.
我正在尝试在 Bootstrap 模式中实现无限滚动。我尝试了几个无限滚动库，但没有一个在模态中工作过。
Here's what my code looks like right now.
这是我的代码现在的样子。
When the modal is opened, jQuery listens for the event and requests data from the server:
当模态打开时，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);
}
});
});
Here is the getData()method it retrieves the messages from:
这是getData()它从中检索消息的方法：
public function getData()
{
$messages = Message::paginate(10);
return response()->json([
'success' => true,
'data' => [
'view' => view('layouts.messages', ['messages' => $messages])->render()
]
], 200);
}
Here is my layouts.messagesblade file:
这是我的layouts.messages刀片文件：
<div class="messages-container">
@foreach ($messages as $message)
<div class="message">{{ $message->text }}</div>
@endforeach
</div>
{{ $messages->links() }}
In the end, the modal looks like this:
最后，模态看起来像这样：
<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>
As you can see, I need to append more data to the .content-containeron each load.
如您所见，我需要.content-container在每次加载时向 附加更多数据。
From here, how can I implement infinite scrolling the modal so that if the user scrolls down to the bottom of the modal, it loads the next page from the server and appends it to the modal body?
从这里开始，我如何实现模态的无限滚动，以便如果用户向下滚动到模态的底部，它会从服务器加载下一页并将其附加到模态主体？
回答by user498641
A quick google search resulted in: http://jscroll.com/
一个快速的谷歌搜索结果：http: //jscroll.com/
It specifically mentions the ability to load data via Ajax.
它特别提到了通过 Ajax 加载数据的能力。
