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

vue实现局部滚动加载加自定义滚动加载的指令 1. 先来实现局部的滚动加载

.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; } } } }

我这的样式外层div的高度设置的500 可以自行设置高度
下面把滚动加载的方法封装成v-loadmore 自定义指令
【vue实现局部滚动加载加自定义滚动加载的指令】新建loadMore.js

import Vue from 'vue'Vue.directive('loadmore', { // inserted: (el, bind, vnode) => { // 这里参考管方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当前绑定的元素 // 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() } }) } })

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

.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; } } } }

自己实现滚动加载就是这样的
知识积累，有不足的地方希望各位评论中指出来改进