GenshinUI

使用用例

滚动方向

content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
注: scrollbar 颜色较浅，故使用了较深的背景色
<template>
  <GScrollView class="g-scroll-view" scrollBehavior="scroll">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>


  <GScrollView class="g-scroll-view" scrollBehavior="scroll" direction='x'>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>

  <GScrollView class="g-scroll-view" direction='both'>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>
</template>

滑动行为:BETA

content 0
content 1
content 2
content 3
content 4
content 5
content 6
content 7
content 8
content 9
content 10
content 11
content 12
content 13
content 14
content 15
content 16
content 17
content 18
content 19
content 20
content 21
content 22
content 23
content 24
content 25
content 26
content 27
content 28
content 29
content 30
content 31
content 32
content 33
content 34
content 35
content 36
content 37
content 38
content 39
content 40
content 41
content 42
content 43
content 44
content 45
content 46
content 47
content 48
content 49
content 50
content 51
content 52
content 53
content 54
content 55
content 56
content 57
content 58
content 59
content 60
content 61
content 62
content 63
content 64
content 65
content 66
content 67
content 68
content 69
content 70
content 71
content 72
content 73
content 74
content 75
content 76
content 77
content 78
content 79
content 80
content 81
content 82
content 83
content 84
content 85
content 86
content 87
content 88
content 89
content 90
content 91
content 92
content 93
content 94
content 95
content 96
content 97
content 98
content 99
content 0
content 1
content 2
content 3
content 4
content 5
content 6
content 7
content 8
content 9
content 10
content 11
content 12
content 13
content 14
content 15
content 16
content 17
content 18
content 19
content 20
content 21
content 22
content 23
content 24
content 25
content 26
content 27
content 28
content 29
content 30
content 31
content 32
content 33
content 34
content 35
content 36
content 37
content 38
content 39
content 40
content 41
content 42
content 43
content 44
content 45
content 46
content 47
content 48
content 49
content 50
content 51
content 52
content 53
content 54
content 55
content 56
content 57
content 58
content 59
content 60
content 61
content 62
content 63
content 64
content 65
content 66
content 67
content 68
content 69
content 70
content 71
content 72
content 73
content 74
content 75
content 76
content 77
content 78
content 79
content 80
content 81
content 82
content 83
content 84
content 85
content 86
content 87
content 88
content 89
content 90
content 91
content 92
content 93
content 94
content 95
content 96
content 97
content 98
content 99
滑动触发行为未被严格定义，现触发动作为长距离大幅度滑动后松手
<template>
  <GScrollView class="g-scroll-view g-scroll-limit-height" scrollBehavior="scroll">
    <div v-for="(_, i) in Array(100)">content {{ i }}</div>
  </GScrollView>

  <GScrollView 
    class="g-scroll-view g-scroll-limit-height" 
    scrollBehavior="scroll" 
    slide 
  >
    <div v-for="(_, i) in Array(100)">content {{ i }}</div>
  </GScrollView>
</template>

边界限制

content
content
content
content
content
content
默认边界为50%， 指定border后仅为固定值，剩余边为 0
<template>
  <GScrollView class="g-scroll-view " scrollBehavior="scroll" :border="{ top: 30, bottom: 100 }">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>
</template>

自定义样式

content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
外层样式定义可视区域，transformBoxClass定义滚动区域. 滚动条分别具有类名 scroll-track 和 scroll-thumb， 可以通过类组合样式覆盖改变滚动条样式
<template>
  <GScrollView class="g-scroll-view">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>

  <GScrollView class="g-scroll-view" style="background: white;" transformBoxClass="g-scroll-black">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>

  <GScrollView class="g-scroll-view" scrollBehavior="scroll" customScrollbar="g-scroll-red">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </GScrollView>
</template>

<style>
  .scroll-thumb.g-scroll-red {
    background-color: red;
  }
</style>

可视区域定位插槽

content
content
content
content
content
content
混入其中
extra插槽位于滚动区域外，可视区域内，用于处理不受滚动影响，但定位等受制于整体元素的额外元素
<template>
  <GScrollView class="g-scroll-view">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <template #extra>
      <div>混入其中</div>
    </template>
  </GScrollView>
</template>

插曲：滚动区域嵌套

content
inner
inner
inner
inner
inner
inner
inner
inner
inner
content
滚动嵌套时，会尝试先滚动内部元素，直到内部触碰边界，才会抛出滚动任务
<template>
  <GScrollView class="g-scroll-view">
    <div>content</div>
    <GScrollView class="g-scroll-view g-scroll-limit-height-x100">
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
      <div>inner</div>
    </GScrollView>
    <div>content</div>
  </GScrollView>
</template>

类型定义

interface ScrollViewProps {
  direction?: 'x' | 'y' | 'both';
  scrollBehavior?: 'auto' | 'scroll' | 'hidden';

  customScrollbar?: string;
  transformBoxClass?: string;

  border?: {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
  };

  slide?: boolean;
  slideOption?: {
    threshold: number; // 滑动阈值
    distance: (i: number) => number; // 自定义滑动距离，传入瞬时滑动速度，返回距离
  };
}

interface ScrollViewEmits {
  (event: 'click', e: Event): void;
  (
    event: 'touchBorder',
    type: {
      direction: ['top' | 'bottom' | '', 'left' | 'right' | ''];
      mouseState: 'up' | 'move' | 'down';
    }
  ): void;
  (
    event: 'scroll',
    e: Event,
    scrollState: {
      mouseState: 'up' | 'move' | 'down';
      scroll: {
        x: number;
        y: number;
      };
    }
  ): void;
}


defineExpose({
  scrollTo: (
    pos: { top: number; left: number; behavior?: 'smooth' },
    duration: number = 500
  ): void,
  scrollBy: (
    pos: { top: number; left: number; behavior?: 'smooth' },
    duration: number = 500
  ): void,
  getScroll: () => ({ x: number, y: number })
});

类型说明

参数说明类型可选值默认值
direction滚动方向stringx y bothy
scrollBehavior滚动行为stringauto scroll hiddenauto
customScrollbar自定义滚动条样式string
transformBoxClass滚动条容器样式string
border四周额外空白距离object{ [key: string]: number}方向的各50%
slide是否开启滑动booleanfalse
slideOption滑动配置object23, a => 30 * a

事件说明

事件名说明回调参数
click鼠标点击详见类型定义
touchBorder触碰边界详见类型定义
scroll滚动详见类型定义

插槽说明

插槽名说明
extraextra插槽位于滚动区域外，可视区域内，用于处理不受滚动影响，但定位等受制于整体元素的额外元素

暴露接口

接口名说明类型
scrollTo滚动视区详见类型定义
getScroll获取滚动条位置() => ({x: number, y: number})
Last Updated:
Contributors: shi-zhong