的Python

Question

如何使用GAE＆＃34;光标＆＃34;实现无限滚动？功能和Jinja2？

例如，假设我检索所有未命名为John的用户（例如，5000个用户）

的Python

users = User.query(User.name != "John")
user_cursor = memcache.get('user_cursor')
if user_cursor:
    users.with_cursor(start_cursor=user_cursor)
    self.render('templates/front.html', users = users)

然后我要显示5000个用户，一次显示3个用户，如果查看者滚动到底部或点击“＃34;加载更多＆＃34;接下来的三个出现了。

HTML

{% for row in users | batch(3) %}
    <div class="row">
    {% for u in row %}
    <p> {{u.firstname}}</p>
    {% endfor %}
    </div> 
{% endfor %}

实现此目的的最佳（最简单）方法是什么？我会非常感谢实际的代码，我现在已经尝试了一天，并且没有取得多大进展。提前致谢！

Answer 1

以下是缺少的概念：

1）在浏览器中维护一个JSON对象（网页上的javascript），该对象包含所有被提取的用户。

2）还保持一个变量来存储最后一个被观察对象的位置，位于滚动的底部。

3）在javascript中，调用后端来获取X用户。您可以在此处使用光标获取查询中的下一个X用户。将每个fetch附加到JSON对象的末尾。你拿到

a）页面加载，然后

b）每次查看的最后一个对象是JSON对象中的最后一个对象。（一旦你开始工作，你可以选择在浏览器到达最后一个之前获取一些。这样，滚动没有延迟。）

4）在侦听scroll事件的页面上添加事件侦听器。在此函数中，您将使用JSON对象查看的最后一个对象进行比较，并根据需要触发新的提取。

这是一个有用的技巧：

var someOffset = 400; // you may have other items on the page.

if ((yourDOM.getBoundingClientRect().bottom <= window.innerHeight + someOffset) && (lastPostShown == userJSON.length)) {
    getMorePosts();
}

当然，您需要在用于获取的javascript的后端之间来回传递光标。

这应该让你开始。

如何使用GAE＆＃34; Cursor＆＃34;实现无限滚动和Jinja2？

的Python

HTML

1 个答案: