在做手机端滚动加载更多时,因为滚动是一个持续过程,所以就导致了会一次或很短时间内触发多次ajax请求, 可以设置一个全局变量控制.
// bool变量, 用于阻止滚动到底部连续触发多次
let isBottom = true
const scrollHeight = element.currentTarget.scrollHeight
const scrollTop = element.currentTarget.scrollTop
// height - top - 容器高度
const scrollLength = scrollHeight - scrollTop
const liBottom = scrollLength - newsContainer
if (liBottom > 100 && liBottom < 180) {
if (isBottom === true) {
isBottom = false
// $(ajax)
}
}
然后取消false,百度很多都是设置延迟1秒种取消,我是用的滚动条高度
if (liBottom > 1000) {
isBottom = true
}
// 视频模板
const vTemple = (url, title, image, visit, catName) => {
const res = `<li class="articles-list-normal">
<div class="article-info-img">
<h3 class="article-title"><a href="${url}">${title}</a></h3>
</div>
<div class='article-img-big'>
<a href="${url}"><img src="${image}" /></a>
</div>
<div class="img-bg">
<a href="${url}"></a>
</div>
<div class="video-click">
<a href="${url}">
<img src="/client/images/mobile/icons/play1.png" />
</a>
</div>
<div class="time">阅读量:${visit} ${catName}</div>
</li>`
return res
}
// 无内容
const noTemple = () => {
const res = '<li class="article-end">再怎么拉都没有啦,不如看看其他版块内容吧!</li>'
return res
}
// 分页
let currentPage = 1
// 分类id
let categoryId = 0
// 用户id
let userId = 0
// bool变量, 用于阻止滚动到底部连续触发多次
let isBottom = true
const windowHeight = $(window).height()
// 列表容器高度
const newsContainer = windowHeight - 120
// 设置容器高度
$('.mobile-main .m-news-list-tit').css('height', `${newsContainer}px`)
// 滚动监听
$('.mobile-main .m-news-list-tit').on('scroll', (element) => {
const scrollHeight = element.currentTarget.scrollHeight
const scrollTop = element.currentTarget.scrollTop
// height - top - 容器高度
const scrollLength = scrollHeight - scrollTop
const liBottom = scrollLength - newsContainer
if (liBottom > 100 && liBottom < 250) {
if (isBottom === true) {
// isBottom 为false 防止连续下拉加载多次
isBottom = false
categoryId = $(element.currentTarget).find('#categoryId').val()
userId = $(element.currentTarget).find('#userId').val()
const nextPage = currentPage + 1
const ajaxOptions = {
method: 'POST',
data: {
id: categoryId,
user_id: userId,
page: nextPage
}
}
let articleList = ''
$.ajax('xxxxxx', ajaxOptions).done((data) => {
const articles = data.articles
articles.forEach((article) => {
let url = article.url
if (article.url === '') {
url = `/articles/${article.id}`
}
const title = article.title
let image = article.image
const visit = article.visit
const catName = article.name
articleList = vTemple(url, title, image, visit, catName)
$(element.currentTarget).find('.articles-list-summary').append(articleList)
})
if (articles.length > 0 && articles.length < 19) {
articleList = noTemple()
$(element.currentTarget).find('.articles-list-summary').append(articleList)
}
}).fail(() => {
// no data
})
// 下一页
currentPage = nextPage
}
}
// 当滚动条高度变化后让isBottom为true
if (liBottom > 1000) {
isBottom = true
}
})