97 lines
3.0 KiB
Plaintext
97 lines
3.0 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="滚动场景"> 比如，卡片列表，文章列表滚动</a-card>
|
||
</div>
|
||
<a-card :bordered="false" class="mt-4 proCard">
|
||
<!-- <a-alert title="UI框架内置滚动条" type="info"-->
|
||
<!-- >如果你只是想简单的，实现一个滚动，可以这么写-->
|
||
<!-- </a-alert>-->
|
||
<!-- <div class="scrollbar-box mt-4">-->
|
||
<!-- <a-scrollbar>-->
|
||
<!-- <p v-for="item in list">{{ item.name }}</p>-->
|
||
<!-- </a-scrollbar>-->
|
||
<!-- </div>-->
|
||
|
||
<a-alert class="mt-4" message="指令方式" type="info">
|
||
<template #description> 基于，perfect-scrollbar 使用方式可参考该插件 </template>
|
||
</a-alert>
|
||
<div class="scrollbar-main mt-4">
|
||
<div v-scrollBar class="scrollbar-box">
|
||
<p v-for="item in list" :key="item.id">{{ item.name }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <a-alert class="mt-4" title="UI框架内置滚动条" type="info">演示，函数触发滚动条位置</a-alert>-->
|
||
<!-- <div class="scrollbar-box mt-4">-->
|
||
<!-- <a-scrollbar ref="scrollbar">-->
|
||
<!-- <p v-for="item in list">{{ item.name }}</p>-->
|
||
<!-- </a-scrollbar>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="mt-4">-->
|
||
<!-- <a-space>-->
|
||
<!-- <a-button @click="goScrollbar(120)">滚动到120位置</a-button>-->
|
||
<!-- <a-button @click="goScrollbar(900)">滚动到900位置</a-button>-->
|
||
<!-- <a-button @click="goScrollbar(0)">滚动到顶部</a-button>-->
|
||
<!-- <a-button @click="goScrollbar(99999)">滚动到底部</a-button>-->
|
||
<!-- </a-space>-->
|
||
<!-- </div>-->
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import 'perfect-scrollbar/css/perfect-scrollbar.css';
|
||
|
||
const list = ref<any>([]);
|
||
|
||
const getList: any[] = () => {
|
||
const arr: any[] = [];
|
||
for (let index = 0; index < 40; index++) {
|
||
arr.push({
|
||
id: `${index}`,
|
||
name: '这内容下面可能还有很多个，鼠标放进来使劲的滚动吧',
|
||
});
|
||
}
|
||
return arr;
|
||
};
|
||
|
||
const scrollbar = ref();
|
||
|
||
function goScrollbar(y) {
|
||
scrollbar.value.scrollTo(0, y);
|
||
}
|
||
|
||
onMounted(() => {
|
||
list.value = getList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
// 如果使用 perfect-scrollbar初始化的DOM，
|
||
// 内部有使用border/margin/padding等会改变元素原有宽高的样式，
|
||
// 就会造成滚动条无限滚动的bug;
|
||
.scrollbar-main {
|
||
width: 360px;
|
||
border: 1px solid #eee;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scrollbar-box {
|
||
width: 360px;
|
||
height: 350px;
|
||
position: relative;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
|
||
p {
|
||
padding: 5px 0;
|
||
color: #666;
|
||
&:nth-child(1) {
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|