實(shí)現(xiàn)元素滾動(dòng)到最底或下拉時(shí)加載
<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 // 最大頁數(shù)
let $dom = $('[dynamicLoad]')
let dynamicLoad = new DynamicLoad({
$dom: $dom,
pageNum: pageNum,
pageMax: pageMax,
onPage: function(page) {
console.log('切換到第'+page+'頁')
dynamicLoad.loading('正在加載，請稍候...') // 顯示加載提示
setTimeout(function(){
// 加載完成 渲染的數(shù)據(jù)
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 // 當(dāng)前元素高度
this.scrollTop = null // 滾動(dòng)位置
this.$domHeight = 0
if (that.$dom[0].scrollHeight>that.$dom[0].clientHeight) // 實(shí)際高度比可視高度大時(shí)
if (that.pageMax>1) // 最大頁碼 > 1
that.$dom.append(that.$tips) // 提示上拉加載更多
// 判斷$dom滾動(dòng)
this.$dom.scroll(function(){
that.scrollArea = Math.floor(that.$dom[0].scrollHeight-that.$dom[0].clientHeight) // 元素實(shí)際高度 - 可視高度
that.scrollTop = Math.ceil(that.$dom[0].scrollTop) // 元素滾動(dòng)位置
if (that.scrollArea===that.scrollTop) that.next() // 判斷 滾動(dòng)位置 === 當(dāng)前元素高度 調(diào)用 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 // 重置當(dāng)前頁碼為首頁
this.pageMax = pageMax // 重置最大頁碼
// this.$dom.html('') // 清空原有列表數(shù)據(jù)
this.onload(html) // 重新加載首頁數(shù)據(jù)
}
next() {
console.log(this.pageNum)
if (this.pageNum<this.pageMax) { // 判斷初始頁小于最大頁碼
this.pageNum++ // 初始頁+1
this.onPage(this.pageNum) // 執(zhí)行onPage()
}
}
}
</script>
</body>
