如何解决用Javascript无限滚动破坏按标题搜索
我决定升级作为课程项目制作的应用程序。它是一个简单的库,每个用户都可以在其中添加电影,就像其他用户的电影一样。该应用程序有一个页面,其中所有电影都是可见的,我想使用分页显示每次获取10部电影,并实现无限滚动功能,该功能会自动获取另外10部电影,并将它们与旧电影一样渲染,直到最终所有这些电影都呈现出来。显示。
该应用程序使用sammy.js和Handlebars构建。还有一个按标题搜索的搜索字段。如果没有搜索条件,只需滚动即可查看所有电影,按预期方式工作-加载页面时将呈现10部电影,并滚动到最后显示动画,并加载10部,依此类推。滚动到底部并呈现所有可用电影时,搜索将按预期进行。然后,如果我搜索某项内容(例如一年),则结果会超过10,向下滚动会显示其余结果。
当我决定在任何滚动之前和所有电影都可见之前(新重新加载)进行搜索时,就会出现问题。然后,我确实获得了预期的结果,但是通过向下滚动(如果我要加载1个结果/ 1页,这将是不可能的),该页将开始加载所有没有搜索筛选器的可用电影。问题出在事件侦听器中,因为我尝试在控制台上记录“页面”,例如,当我搜索单个电影时,在事件监听器之外,“页面”变量设置为1,而该变量不应进入“ if”语句,但确实如此,然后由于某种原因,“ pages”再次为4。
下面是整个逻辑。我敢肯定问题出在那儿,但经过多次尝试却找不到。预先感谢!
export async function home() {
this.partials = {
header: await this.load('../templates/header.hbs'),footer: await this.load('../templates/footer.hbs'),loading: await this.load('../templates/loading.hbs'),moviePartial: await this.load('../templates/moviePartial.hbs')
}
const sammmy = this;
const search = this.params.search || '';
let count = await api.getCount(search);
let pages = Math.ceil(count / 10);
let page = pages / pages || 1;
const movies = await api.getAll(search,page);
let data;
if (movies.length === 0) {
data = localStorage;
} else {
data = Object.assign({ movies,search },localStorage);
}
window.addEventListener('scroll',async function () {
let { scrollTop,scrollHeight,clientHeight } = document.documentElement;
if (scrollHeight - clientHeight === scrollTop && pages > 1) {
if (page <= pages + 1) {
page++;
}
const loading = document.querySelector('.loading');
loading.classList.add('show');
const nmovies = await api.getAll(search,page);
data.movies = data.movies.concat(nmovies);
setTimeout(() => {
loading.classList.remove('show');
sammmy.partial('../templates/home.hbs',data)
},1000);
pages--;
}
})
this.partial('../templates/home.hbs',data);
}```
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。