ScrollContainer
参考element-ui
的 el-scrollbar 组件实现
滚动容器组件
Usage
<template>
<div class="p-4">
<div class="my-4">
<a-button @click="scrollTo(100)">滚动到100px位置</a-button>
<a-button @click="scrollTo(800)">滚动到800px位置</a-button>
<a-button @click="scrollTo(0)">滚动到顶部</a-button>
<a-button @click="scrollBottom()">滚动到底部</a-button>
</div>
<div class="scroll-wrap">
<ScrollContainer ref="scrollRef">
<ul>
<template v-for="index in 100" :key="index">
<li>{{ index }}</li>
</template>
</ul>
</ScrollContainer>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
export default defineComponent({
components: { CollapseContainer, ScrollContainer },
setup() {
const scrollRef = ref<Nullable<ScrollActionType>>(null);
const getScroll = () => {
const scroll = unref(scrollRef);
if (!scroll) {
throw new Error('scroll is Null');
}
return scroll;
};
function scrollTo(top: number) {
getScroll()?.scrollTo(top);
}
function scrollBottom() {
getScroll()?.scrollBottom();
}
return {
scrollTo,
scrollRef,
scrollBottom,
};
},
});
</script>
<style lang="less" scoped>
.scroll-wrap {
width: 50%;
height: 300px;
background: #fff;
}
</style>
Methods
名称 | 回调参数 | 说明 |
---|---|---|
getScrollWrap | ()=>HtmlElement | 获取滚动容器 el |
scrollBottom | Function | 滚动到底部 |
scrollTo | Function(to:number,duration = 500) | 滚动到指定位置 |
Slots
名称 | 说明 |
---|---|
default | 默认区域 |