ScrollBar滚动组件

该组件类似于element-ui中的el-scrollbar,用于自定义滚动条组件。

TIP

该组件如果滚动条要生效的化，父元素要设置固定的高度或宽度

基本用法

垂直滚动

这是列表内容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

展开查看

vue

<template>
 <div class="scroll-vertical">
  <ScrollBar>
    <div v-for="i in 50" :key="i">这是列表内容{{ i }}</div>
  </ScrollBar>
</div>  
</template>
<script setup lang="ts">
import {  ScrollBar } from '@nw-design/ui'
import '@nw-design/ui/dist/style.css'
</script>
<style lang="less">
.scroll-vertical {
  height: 500px;
  border: 1px solid #ccc;
}

</style>

水平滚动

这是列表内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容

展开查看

vue

<template>
 <div class="scroll-horizontal">
  <ScrollBar>
       <div style="width: 300px;">这是列表内容，这是内容，这是内容，这是内容，
       这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容</div>
  </ScrollBar>
</div>  
</template>
<script setup lang="ts">
import {  ScrollBar } from '@nw-design/ui'
import '@nw-design/ui/dist/style.css'
</script>
<style lang="less">
.scroll-horizontal {
  height: 500px;
  border: 1px solid #ccc;
}

</style>

API

通过设置ScrollBar的属性可以实现不同的效果。滚动条组件的属性说明如下:

属性	说明	类型	默认值
native	是否启用浏览器自带滚动条	boolean	false
wrapStyle	外层warp style	string/array	-
wrapClass	外层warp class	string/array	-
viewClass	内层view class	string/array	-
viewStyle	内层view style	string/array	-
noresize	尺寸是否不变化如果 container 尺寸不会发生变化，最好设置它可以优化性能	boolean	false
tag	滚动条内层渲染的形式	string	div

ScrollBar滚动组件 #

基本用法 #

垂直滚动 #

水平滚动 #

API #

ScrollBar滚动组件

基本用法

垂直滚动

水平滚动

API