Tu View PlusScrollbar 滚动条
用于替换浏览器原生滚动条。
基础用法
通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<tu-scrollbar height="260px">
<div class="demo-scrollbar-item" v-for="item in 20" :key="item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style><template>
<tu-scrollbar height="260px">
<div class="demo-scrollbar-item" v-for="item in 20" :key="item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style>横向滚动
当元素宽度大于滚动条宽度时，会显示横向滚动条。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<template>
<tu-scrollbar>
<div class="demo-scrollbar-content">
<div v-for="item in 50" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-content {
display: flex;
}
.demo-scrollbar-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style><template>
<tu-scrollbar>
<div class="demo-scrollbar-content">
<div v-for="item in 50" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<style scoped>
.demo-scrollbar-content {
display: flex;
}
.demo-scrollbar-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style>最大高度
当元素高度超过最大高度，才会显示滚动条。
1
2
3
<template>
<tu-button @click="remove">减少选项</tu-button>
<tu-button @click="add">添加选项</tu-button>
<tu-scrollbar max-height="260px">
<div v-for="item in count" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const count = ref(3);
const add = () => {
count.value++;
};
const remove = () => {
if (count.value > 0) count.value--;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style><template>
<tu-button @click="remove">减少选项</tu-button>
<tu-button @click="add">添加选项</tu-button>
<tu-scrollbar max-height="260px">
<div v-for="item in count" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const count = ref(3);
const add = () => {
count.value++;
};
const remove = () => {
if (count.value > 0) count.value--;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
</style>手动滚动
通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
<tu-slider
class="demo-slider"
v-model="value"
:max="max"
@change="handleSliderChange"
/>
<tu-scrollbar ref="scrollbarRef" height="260px" always @scroll="scroll">
<div ref="innerRef">
<div v-for="item in 20" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { TuScrollbar } from 'tu-view-plus';
const max = ref(0);
const value = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof TuScrollbar>>();
onMounted(() => {
max.value = innerRef.value!.clientHeight - 240;
});
const handleSliderChange = (value: number) => {
scrollbarRef.value!.setScrollTop(value);
};
const scroll = ({ scrollTop }: { scrollTop: number }) => {
value.value = scrollTop;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
.demo-slider {
margin-bottom: 40px;
}
</style><template>
<tu-slider
class="demo-slider"
v-model="value"
:max="max"
@change="handleSliderChange"
/>
<tu-scrollbar ref="scrollbarRef" height="260px" always @scroll="scroll">
<div ref="innerRef">
<div v-for="item in 20" :key="item" class="demo-scrollbar-item">
{{ item }}
</div>
</div>
</tu-scrollbar>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { TuScrollbar } from 'tu-view-plus';
const max = ref(0);
const value = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof TuScrollbar>>();
onMounted(() => {
max.value = innerRef.value!.clientHeight - 240;
});
const handleSliderChange = (value: number) => {
scrollbarRef.value!.setScrollTop(value);
};
const scroll = ({ scrollTop }: { scrollTop: number }) => {
value.value = scrollTop;
};
</script>
<style scoped>
.demo-scrollbar-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 2px;
font-size: 14px;
background: rgba(128, 128, 128, 0.2);
color: #71757f;
}
.demo-slider {
margin-bottom: 40px;
}
</style>Scrollbar API
Scrollbar Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| height | 滚动条高度 | String Number | - |
| max-height | 滚动条最大高度 | String Number | - |
| native | 是否使用原生滚动条样式 | Boolean | false |
| wrap-style | 包裹容器的自定义样式 | String Object | - |
| wrap-class | 包裹容器的自定义类名 | String | - |
| view-style | 视图的自定义样式 | String Object | - |
| view-class | 视图的自定义类名 | String | - |
| noresize | 不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能 | Boolean | false |
| tag | 视图的元素标签 | String | div |
| always | 滚动条总是显示 | Boolean | false |
| min-size | 滚动条最小尺寸 | Number | 20 |
Scrollbar Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| scroll | 当触发滚动事件时，返回滚动的距离 | Function |
Scrollbar Slots
| 参数名 | 描述 |
|---|---|
| default | 自定义默认内容 |
Scrollbar Exposes
| 参数名 | 描述 | 类型 |
|---|---|---|
| handleScroll | 触发滚动事件 | Function |
| scrollTo | 滚动到一组特定坐标 | Function |
| setScrollTop | 设置滚动条到顶部的距离 | Function |
| setScrollLeft | 设置滚动条到左边的距离 | Function |
| update | 手动更新滚动条状态 | Function |
| wrapRef | 滚动条包裹的 ref 对象 | Object |