- First, implement the local rolling load
<template> <div class="cart"> <div class="cart-musics"> <ul class="cart-musics-ul"> <li v-for="(item, index) in cartMusics" :key="index"> {{item}} </li> <li class="last-page text-tblr-center" v-show="page > last_page">～No more～</li> </ul> </div> </div> </template> <script> export default { data () { return { cartMusics: ['This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.'], page: 1, last_page: 10, scrollBottom: null } }, watch: { // Here, listening to scrollBottom equals 0 triggers the method of getting data, otherwise it will not trigger scrollBottom (val) { // console.log('I'm the distance from the bottom of watch monitoring ', val) if (val !== 0) return false this.page++ // Judge that the current page number is greater than the last page return false loading completed if (this.page > this.last_page) return false this.getCartMusics() } }, mounted () { // this.getCartMusics() // Add a scrolling event listener to the list element when loading the page for the first time document.querySelector('.cart-musics-ul').addEventListener('scroll', this.hanleScroll, true) }, methods: { hanleScroll () { console.log('Distance from scroll bar to top', document.querySelector('.cart-musics-ul').scrollTop) console.log('Height of monitored elements', document.querySelector('.cart-musics-ul').clientHeight) console.log('The height of the scroll bar of the listening element', document.querySelector('.cart-musics-ul').scrollHeight) this.scrollBottom = (document.querySelector('.cart-musics-ul').scrollHeight - document.querySelector('.cart-musics-ul').clientHeight) - document.querySelector('.cart-musics-ul').scrollTop }, getCartMusics () { // You can add loading by yourself when you get data here // When getting data, the body is out of hiding, and the screen cannot slide at this time. document.body.style.overflow = 'hidden' this.cartMusics = this.cartMusics.concat(['This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.']) // Set body overflow to auto after obtaining data successfully document.body.style.overflow = 'auto' } }, beforeDestroy () { // document.querySelector('.cart-musics-ul').removeEventListener('scroll', this.hanleScroll, true) } } </script> <style lang="scss" scoped> .cart{ padding-top: 50px; font-size: 12px; .cart-musics{ margin-top: 30px; // overflow: hidden; height: 500px; border-bottom: 1px dashed #999999; border-bottom-width: 2px; .cart-musics-ul{ overflow-x: scroll; height: 500px; li{ padding: 0 10px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; height: 80px; } } } } </style>
The height of the outer div of my style is set to 500, which can be set by yourself.
Next, encapsulate the scroll load method as a v-loadmore custom instruction
New loadMore.js
import Vue from 'vue' Vue.directive('loadmore', { // inserted: (el, bind, vnode) => { // Here refer to the management https://cn.vuejs.org/v2/guide/custom-directive.htmlා% E5% 8A% A8% E6% 80% 81% E6% 8C% 87% E4% BB% A4% E5% 8F% 82% E6% 95% B0 // el currently bound element // console.log(el, bind, vnode) // Add a scrolling event listener to an element el.addEventListener('scroll', function () { console.log('Height of binding element:', el.clientHeight) console.log('The height of the scroll bar that binds the element', el.scrollHeight) console.log('Distance from scroll bar to top', el.scrollTop) console.log('Height of scroll bar - Height of element - Distance from scroll bar to top = 0', (el.scrollHeight - el.clientHeight) - el.scrollTop) // The judgment here is the same as the watch monitor above. if ((el.scrollHeight - el.clientHeight) - el.scrollTop === 0) { // binding.value to call the method on the instruction to get data binding.value() } }) } })
It's much easier to use in the page. You can directly use the instruction to bind a method to call the method to get data.
<template> <div class="cart"> <div class="cart-musics"> <ul class="cart-musics-ul" v-loadmore="loadMore"> <li v-for="(item, index) in cartMusics" :key="index"> {{item}} </li> <li class="last-page text-tblr-center" v-show="page > last_page">～No more～</li> </ul> </div> </div> </template> <script> export default { data () { return { cartMusics: ['This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.'], page: 1, last_page: 10, scrollBottom: null } }, mounted () {}, methods: { // The way of instruction directly calls the method on the instruction loadMore () { this.page++ // Judge that the current page number is greater than the last page return false loading completed if (this.page > this.last_page) return false this.getCartMusics() }, getCartMusics () { // You can add loading by yourself when you get data here // When getting data, the body is out of hiding, and the screen cannot slide at this time. document.body.style.overflow = 'hidden' this.cartMusics = this.cartMusics.concat(['This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.', 'This is the test data.']) // Set body overflow to auto after obtaining data successfully document.body.style.overflow = 'auto' } } } </script> <style lang="scss" scoped> .cart{ padding-top: 50px; font-size: 12px; .cart-musics{ margin-top: 30px; // overflow: hidden; height: 500px; border-bottom: 1px dashed #999999; border-bottom-width: 2px; .cart-musics-ul{ overflow-x: scroll; height: 500px; li{ padding: 0 10px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; height: 80px; } } } } </style>
It's like this to implement the rolling load by yourself.
There are some deficiencies in knowledge accumulation. I hope you can point out in your comments for improvement.