z-base-ui

Appearance

ZDataScrolling 数据滚动 ​

  • 通常用于在一个容器内展示多条数据，版本要求 >= 1.1.1

基础效果 ​

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
<template>
  <z-data-scrolling :width="500" :height="500">
    <div class="card">
      <div class="item" v-for="item in 10" :key="item">
        {{item}}
      </div>
    </div>
  </z-data-scrolling>
</template>

<script setup lang="ts">
</script>

<style scoped>
.item {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-bottom: 1px solid #c6e2ff;
}
</style>

滚动方向 ​

direction 支持4个方向分别是： top、bottom、left、right

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
<template>
   <div class="box">
     <z-data-scrolling :width="300" :height="500">
       <div class="card">
         <div class="item" v-for="item in 10" :key="item">
           {{item}}
         </div>
       </div>
     </z-data-scrolling>

     <z-data-scrolling :width="300" :height="500" direction="bottom">
       <div class="card">
         <div class="item" v-for="item in 10" :key="item">
           {{item}}
         </div>
       </div>
     </z-data-scrolling>

     <z-data-scrolling :width="300" :height="40" direction="left">
       <div class="cards">
         <div class="item" v-for="item in 10" :key="item">
           {{item}}
         </div>
       </div>
     </z-data-scrolling>

     <z-data-scrolling :width="300" :height="50" direction="right">
       <div class="cards">
         <div class="item" v-for="item in 10" :key="item">
           {{item}}
         </div>
       </div>
     </z-data-scrolling>
   </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap;
  grid-gap: 24px;
  height: 700px;
}

.cards {
  display: flex;
}
.card .item {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-bottom: 1px solid #c6e2ff;
}
.cards .item{
  width: 80px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 0;
  border-right: 1px solid #c6e2ff;
}
</style>

API 属性 ​

属性名说明类型默认值
width容器可见宽度number100%
height容器可见高度number100%
speed运动速度number1
auto自动滚动Booleantrue
wheel允许用户滚轮控制Booleantrue
direction滚动方向top | bottom | left | righttop
data数据，版本>=1.1.12Array[]

注意： ​

开启横向滚动时，需要在外层添加一个display: flex;使内容横向排列。

常见问题 ​

  • 数据不满足滚动条件，仍然发生了滚动
    • 若您的数据在第一次渲染完成后会随时发生改变，并且层级超过两层，此时可以使用 data 传入您的数据，以此来保证组件的实时性。