1.点击加载更多
<template>
<div class="list">
<h3>列表的懒加载</h3>
<div v-for="(item, index) in list" :key="index">
<div>{{item.id}}</div>
</div>
<div>
<button v-if="moreShowBoolen" @click="moreShow">点击查询更多</button>
<div v-else>已无更多</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: [],
moreShowBoolen: false,
nowPage: 1
}
},
mounted () {
this.init()
},
methods: {
init () {
this.$axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
if (res.data.length <= 10) { // 10条数据一页
this.list = res.data
this.moreShowBoolen = false
} else {
this.list = res.data.slice(0, 10)
this.moreShowBoolen = true
}
})
},
moreShow () { // 点击查询更多
this.$axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
this.list = this.list.concat(res.data.slice(this.nowPage * 10, (this.nowPage + 1) * 10))
this.nowPage++
if (res.data.length >= this.nowPage * 10) {
this.moreShowBoolen = true
} else {
this.moreShowBoolen = false
}
})
}
}
}
</script>
2.滚动加载更多
<template>
<div class="list">
<h3>列表的懒加载--滚动</h3>
<div>
<div v-for="(item, index) in list" :key="index">
<div>{{item.id}}</div>
</div>
</div>
<div>
<div v-if="moreShowBoolen">tips：滚动加载更多</div>
<div v-else>已无更多</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: [],
moreShowBoolen: false,
nowPage: 1,
scrollHeight: 0
}
},
mounted () {
this.init()
// screen.availHeight表示屏幕高度
// document.documentElement.scrollTop表示当前页面滚动条的位置,documentElement对应的是html标签,body对应的是body标签
// document.compatMode用来判断当前浏览器采用的渲染方式,CSS1Compat表示标准兼容模式开启
window.addEventListener('scroll', () => {
const scrollY = document.documentElement.scrollTop || document.body.scrollTop // 滚动条在Y轴上的滚动距离
const vh = document.compatMode === 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight // 页面的可视高度（能看见的）
const allHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) // 页面的总高度（所有的）
if (scrollY + vh >= allHeight) { // 当滚动条滑到页面底部
this.scrollMore()
}
})
},
methods: {
init () {
this.$axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
if (res.data.length <= 10) { // 10条数据一页
this.list = res.data
this.moreShowBoolen = false
} else {
this.list = res.data.slice(0, 10)
this.moreShowBoolen = true
}
})
},
scrollMore () { // 点击查询更多
this.$axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
this.list = this.list.concat(res.data.slice(this.nowPage * 10, (this.nowPage + 1) * 10))
this.nowPage++
if (res.data.length >= this.nowPage * 10) {
this.moreShowBoolen = true
} else {
this.moreShowBoolen = false
}
})
}
}
}
</script>
tips:这里面用的请求接口是通用的，详情查看JSONPlaceholder