vue 滚动加载更多数据
- data() {
- return {
- loading: false,
- loadingMore: false,//loading 加载更多
- isScroll: true,// 是否可以滚动
- pageIndex: 1,
- pageSize: 10,
- list: [],
- }
- },
- mounted() {
- document.addEventListener('scroll', this.scrollMoreData, false)
- },
- methods: {
- scrollMoreData() {
- const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop // 滚动高度
- const clientHeight = document.documentElement.clientHeight || Windows.screen.availHeight // 屏幕可用工作区高度
- const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight // 网页可见区域高 (包括边线的宽)
- // console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)
- if ((scrollTopHeight + clientHeight) + 50>= offsetHeight && this.isScroll) {
- this.isScroll = false
- this.loadingMore = true
- let pageNo = this.pageIndex += 1
- API.Get('/list', {
- pageIndex: pageNo,
- pageSize: this.pageSize,
- }).then(res => {
- this.loadingMore = false
- if (res.data.list.length> 0) {
- this.isScroll = true
- this.list = [...this.list, ...res.data.list]
- } else {
- this.show = true
- }
- })
- }
- },
- },
- },
- destroyed() {
- document.removeEventListener('scroll', this.scrollMoreData, false)
来源: http://www.bubuko.com/infodetail-3107946.html