vue实现局部滚动加载 加自定义滚动加载的指令

1. 先来实现局部的滚动加载

<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">～没有更多了～</li></ul></div></div></template><script>export default {data () {return {cartMusics: ['这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据'],page: 1,last_page: 10,scrollBottom: null}},watch: {// 这里监听 scrollBottom 等于0 触发获取数据的方法 否则不触发scrollBottom (val) {// console.log('我是watch监听的距离底部的距离', val)if (val !== 0) return falsethis.page++// 判断当前页数大于最后一页 return false 加载完毕if (this.page > this.last_page) return falsethis.getCartMusics()}},mounted () {// this.getCartMusics()// 首次加载页面的时候给列表元素添加 滚动的事件监听document.querySelector('.cart-musics-ul').addEventListener('scroll', this.hanleScroll, true)},methods: {hanleScroll () {console.log('滚动条距离顶部的距离', document.querySelector('.cart-musics-ul').scrollTop)console.log('监听的元素的高度', document.querySelector('.cart-musics-ul').clientHeight)console.log('监听元素的滚动条的高度', 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 () {// 这里获取数据可以自行添加loading// 获取数据的时候body超出隐藏 不会此时屏目禁止滑动document.body.style.overflow = 'hidden'this.cartMusics = this.cartMusics.concat(['这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据'])// 获取数据成功后设置body overflow为autodocument.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>

我这的样式外层div的高度设置的500 可以自行设置高度

下面把滚动加载的方法封装成v-loadmore 自定义指令

新建loadMore.js

import Vue from 'vue'Vue.directive('loadmore', {// inserted: (el, bind, vnode) => {// 这里参考管方/v2/guide/custom-directive.html#%E5%8A%A8%E6%80%81%E6%8C%87%E4%BB%A4%E5%8F%82%E6%95%B0// el当前绑定的元素// console.log(el, bind, vnode)// 给元素添加滚动事件监听el.addEventListener('scroll', function () {console.log('绑定元素的高度：', el.clientHeight)console.log('绑定元素的滚动条的高度', el.scrollHeight)console.log('滚动条距离顶部的距离', el.scrollTop)console.log('滚动条的高度 - 元素的高度 - 滚动条距离顶部的距离 = 0', (el.scrollHeight - el.clientHeight) - el.scrollTop)// 这里的判断和上面watch监听是一样的if ((el.scrollHeight - el.clientHeight) - el.scrollTop === 0) {// binding.value来调用指令上的方法获取数据binding.value()}})}})

页面中使用就简单很多了 可以直接使用指令绑定一个方法来调用获取数据的方法

<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">～没有更多了～</li></ul></div></div></template><script>export default {data () {return {cartMusics: ['这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据'],page: 1,last_page: 10,scrollBottom: null}},mounted () {},methods: {// 指令的方式直接调用指令上的方法loadMore () {this.page++// 判断当前页数大于最后一页 return false 加载完毕if (this.page > this.last_page) return falsethis.getCartMusics()},getCartMusics () {// 这里获取数据可以自行添加loading// 获取数据的时候body超出隐藏 不会此时屏目禁止滑动document.body.style.overflow = 'hidden'this.cartMusics = this.cartMusics.concat(['这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据', '这是测试的数据'])// 获取数据成功后设置body overflow为autodocument.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>

自己实现滚动加载就是这样的

知识积累，有不足的地方希望各位评论中指出来改进