支持滚动,支持 overlay 滚动条。
# 基础示例
既有垂直滚动,又有水平滚动。
<template>
<EBlock class="e-scroll-showcase">
<EBlock style="margin-left: 10px; font-size: 20px;">
一行要能看到 3 个数字,行间距空白一致
</EBlock>
<EScroll style="width: 504px; height: 204px;" >
<EBlock v-for="i in 50" :key="i" class="item" align="center justify" horizontal>
<span>{{ i }}</span>
<span> - {{ i }} - </span>
<span> {{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# 不显示滚动条
设置 noScrollbar
属性可控制滚动条的隐藏。
<template>
<EBlock class="e-scroll-showcase">
<EScroll style="width: 504px; height: 204px;" no-scrollbar>
<EBlock v-for="i in 50" :key="i" class="item" align="center justify" horizontal>
<span>{{ i }}</span>
<span> - {{ i }} - </span>
<span> {{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# scroll 事件数据
包含滚动条位置 position
、滚动方向 direction
、scrollTop 的值变化 delta
、是否发生折回 inflected
、折回位置 inflection
。
<template>
<EBlock class="e-scroll-showcase">
<EBlock style="margin: 0 10px;">
<EText>position: {{ scrollEvent.position }}</EText>
<EText>direction: {{ scrollEvent.direction }}</EText>
<EText>delta: {{ scrollEvent.delta }}</EText>
<EText>inflected: {{ scrollEvent.inflected }}</EText>
<EText>inflection: {{ scrollEvent.inflection }}</EText>
</EBlock>
<EScroll style="width: 504px; height: 204px;" @scroll="onscroll">
<EBlock v-for="i in 50" :key="i" class="item" align="center justify" horizontal>
<span>{{ i }}</span>
<span>- {{ i }} -</span>
<span> {{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<script>
export default {
data() {
return {
scrollEvent: {
position: null,
direction: null,
delta: null,
inflected: null,
inflection: null,
},
};
},
methods: {
onscroll(ev) {
Object.assign(this.scrollEvent, ev);
},
},
};
</script>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# 滚动到指定的位置
通过调用组件的 scrollTo
方法让内容滚动到指定位置。
<template>
<EBlock class="e-scroll-showcase">
<EButton style="margin-left: 10px;" @click="()=>$refs.scroll.scrollTo({top: 500, behavior: 'smooth'})">
滚动到第11行
</EButton>
<EScroll ref="scroll" style="width: 504px; height: 204px;" >
<EBlock v-for="i in 50" :key="i" class="item" align="center justify" horizontal>
<span>{{ i }}</span>
<span> - {{ i }} - </span>
<span> {{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# 无水平滚动
配合样式实现无水平滚动的情况。
<template>
<EBlock class="e-scroll-showcase">
<EScroll style="width: 504px; height: 204px;" >
<EBlock v-for="i in 50" :key="i" class="item" align="center justify" horizontal style="width: 100%;">
<span>{{ i }}</span>
<span> - {{ i }} - </span>
<span> {{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# 无水平、垂直滚动
显示所有数据,要看得到每一行的三个数字、第一行顶部只有 5px(一半)空白。
<template>
<EBlock class="e-scroll-showcase">
<EScroll style="width: 504px; height: 204px;" no-scrollbar class="no-scroll">
<EBlock v-for="i in 4" :key="i" class="item" align="center justify" style="width: 100%;" horizontal>
<span>{{ i }}</span>
<span> - {{ i }} - </span>
<span> {{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# 和 EPopup
组件搭配使用
实现下拉框中的内容超出可滚动。
<template>
<EBlock class="e-scroll-showcase">
<EButton style="margin: 30px 10px;" @click="onclick">
点击本按钮,打开滚动面板,查看滚动是否正常
<EPopup :visible="visible" class="e-scroll-showcase-popup">
<EBlock style="margin-left: 10px; margin-top: 10px; font-size: 20px;">
垂直、水平滚动:一行能看到 3 个数字,行间距一致
</EBlock>
<EScroll style="width: 504px; height: 204px;" @scroll="onscroll">
<EBlock v-for="i in asyncItems" :key="i" class="item"
align="center justify" horizontal>
<span>{{ i }}</span>
<span>- {{ i }} -</span>
<span>{{ i }}</span>
</EBlock>
</EScroll>
</EPopup>
</EButton>
</EBlock>
</template>
<script>
export default {
data() {
return {
scrollEvent: {
position: null,
direction: null,
delta: null,
inflected: null,
inflection: null,
},
visible: false,
asyncItems: [],
};
},
methods: {
onscroll(ev) {
Object.assign(this.scrollEvent, ev);
},
onclick() {
this.visible = true;
setTimeout(() => {
this.asyncItems = new Array(50).fill().map((_, index) => index);
}, 100);
},
},
};
</script>
<style>
.e-scroll-showcase .e-scroll, .e-scroll-showcase-popup .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase, .e-scroll-showcase-popup .e-scroll.no-scroll .e-scroll__body {
justify-content: flex-end;
}
.e-scroll-showcase .item, .e-scroll-showcase-popup .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# 更多示例
max-height 样式设置到 e-scroll 上。
<template>
<EBlock class="e-scroll-showcase">
<EScroll style="width: 504px; margin-bottom: 20px; max-height: 204px;">
<EBlock v-for="i in 50" :key="i" class="item" align="center justify" horizontal>
<span>{{ i }}</span>
<span>- {{ i }} -</span>
<span>{{ i }}</span>
</EBlock>
</EScroll>
</EBlock>
</template>
<style>
.e-scroll-showcase .e-scroll {
border: 2px solid red;
margin: 10px;
width: calc(100% - 20px);
}
.e-scroll-showcase {
justify-content: flex-end;
}
.e-scroll-showcase .item {
width: 950px;
height: 40px;
background: #ccc;
margin: 5px 0;
line-height: 40px;
color: white;
}
</style>
# EScroll
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
noScrollbar | 是否不显示滚动条 | Boolean | false | - |
# Events
Event Name | Description | Parameters |
---|---|---|
scroll | - | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
default | - | - |