More bottom loading (principle)

understand

1. Use the API to obtain them respectively

Rolling height (document. DocumentElement. ScrollTop) viewing area/screen height (document. DocumentElement. ClientHeight) Page height (document. DocumentElement. ScrollHeight)Copy the code

Principle: 2.

If(scroll height + viewable area >= page height){do something function}Copy the code

Application in VUE

1. Use event listening to listen for events you want to execute

Window. addEventListener(' scroll ', the event you want to execute)Copy the code

2. Cancel event listening and listen for the event you want to execute

Window. The removeEventListener (' scroll ', you want to perform, false)Copy the code

Be sure to cancel event listening! Otherwise, after you execute the event, it will continue to execute the event on another page (console error).

example

<template> <div class="singer-title"> <h1 class="singer-title"> <ul class="singer-list clearfix"> <li class="singer-item" v-for="(item, index) in singerList" :key="index"> <a href="#" class=""> <div class="singer-info"> <img :src="`${item.picUrl}? Param = 180 y180 ` "> < span > {{item. The name}} < / span > < / div > < / a > < / li > < / ul > < div v - if = 'isShow' > has been really < / div > < / div > < / template > export default { name: 'Singer', data () { return { singerList: [], offset: 0, isShow: false } }, methods: { getSingerList () { this.$api.getSinger({ limit: 20, offset: This.offset}). Then (res => {if (res.artists.length === 0) {this.isshow = true return} // offset this.offset This.singerlist = [...this.singerList,...res.artists]})}, / / bottom listenBottomOut trigger function () {const scrollTop = document. The documentElement. The scrollTop | | document. The body. The scrollTop const clientHeight = document.documentElement.clientHeight const scrollHeight = document.documentElement.scrollHeight if (scrollTop + clientHeight >= scrollHeight) {// If (! IsShow) {this.getSingerList()} return}}}, created () {this.getSingerList()}, Mounted () {// Listen to window.adDeventListener ('scroll', this.listenbottomout)}, Destroyed () {/ / left page to cancel to monitor window. The removeEventListener (' scroll ', enclosing listenBottomOut, false)}}Copy the code

Reference: blog.csdn.net/weixin_4633…