1.drawer里不能滚动 解决方案:
<el-drawer
v-model="warehouseDrawer"
custom-class="warehouse-drawer-wraper"
title="已入库货品"
size="640"
:append-to-body="true"
>
<div class="fill">
<DrawerWarehouse></DrawerWarehouse>
<div>
</el-drawer>
//css
.fill {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.warehouse-drawer-wraper {
.el-drawer {
outline: none;
&__body {
height: 100%;
overflow: hidden;
}
}
}
2.el-scrollbar组件判断滚动到底部 执行加载更多
<div class="scroll-view">
<el-scrollbar @scroll="onScroll">
<div class="scroll-body">
<template v-for="(item, index) in resList" :key="item.id">
</template>
</div>
</el-scrollbar>
</div>
const onScroll = (e) => {
const el = document.getElementsByClassName('scroll-body')[0];
const elView = document.getElementsByClassName('scroll-view')[0];
if (el && elView) {
const windowHeight = elView.clientHeight;
const scrollTop = e.scrollTop;
const bodyScrollHeight = el.scrollHeight;
if (scrollTop + windowHeight >= bodyScrollHeight - 5) {
loadMore();
}
}
};
后续会持续更新