实现元素滚动到最底或下拉时加载
<body>
<ul dynamicLoad ></ul> <!--$dom-->
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
<script>
$(function(){
let pageNum = 1 // 初始页
let pageMax = 5 // 最大页数
let $dom = $('[dynamicLoad]')
let dynamicLoad = new DynamicLoad({
$dom: $dom,
pageNum: pageNum,
pageMax: pageMax,
onPage: function(page) {
console.log('切换到第'+page+'页')
dynamicLoad.loading('正在加载，请稍候...') // 显示加载提示
setTimeout(function(){
// 加载完成 渲染的数据
dynamicLoad.onload(`
<li> new 1 </li>
<li> new 2 </li>
<li> new 3 </li>
`)
}, 500)
}
})
// 重置 初始页，最大页，首次加载html
dynamicLoad.reset({ pageNum:1, pageMax:3, html:`
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
` })
})
class DynamicLoad {
constructor({ $dom, pageNum, pageMax, onPage }) {
let that = this // 绑定this
this.pageNum = pageNum // 初始页
this.pageMax = pageMax // 最大页码
this.onPage = onPage //
this.$dom = $dom // dom
this.$tips = $('<p class="end">上拉加载更多</p>') // 加载提示
this.scrollArea = null // 当前元素高度
this.scrollTop = null // 滚动位置
this.$domHeight = 0
if (that.$dom[0].scrollHeight>that.$dom[0].clientHeight) // 实际高度比可视高度大时
if (that.pageMax>1) // 最大页码 > 1
that.$dom.append(that.$tips) // 提示上拉加载更多
// 判断$dom滚动
this.$dom.scroll(function(){
that.scrollArea = Math.floor(that.$dom[0].scrollHeight-that.$dom[0].clientHeight) // 元素实际高度 - 可视高度
that.scrollTop = Math.ceil(that.$dom[0].scrollTop) // 元素滚动位置
if (that.scrollArea===that.scrollTop) that.next() // 判断 滚动位置 === 当前元素高度 调用 next()
})
}
loading (texts) {
this.$tips.text(texts) // 改变加载提示
}
onload (html) {
this.$tips.remove() // 清除加载提示
this.$dom.append(html) // 把传过来的html插入dom
this.$dom.append(this.$tips) // 插入加载提示
// 判断最大页码 , 初始页
if (this.pageNum===this.pageMax) this.$tips.text('没有更多啦～')
else this.$tips.text('上拉加载更多')
if (this.pageMax===1 && this.pageNum===1) this.$tips.remove()
}
reset ({ pageNum, pageMax, html }) {
this.pageNum = pageNum // 重置当前页码为首页
this.pageMax = pageMax // 重置最大页码
// this.$dom.html('') // 清空原有列表数据
this.onload(html) // 重新加载首页数据
}
next() {
console.log(this.pageNum)
if (this.pageNum<this.pageMax) { // 判断初始页小于最大页码
this.pageNum++ // 初始页+1
this.onPage(this.pageNum) // 执行onPage()
}
}
}
</script>
</body>
网友评论