nimble-ui scrollbar 封装滚动插件

📢 介绍

nimble-ui scrollbar 封装滚动插件

⚡ 使用说明

安装依赖

npm i @nimble-ui/scrollbar
# or
yarn add @nimble-ui/scrollbar
# or
pnpm i @nimble-ui/scrollbar

使用

<template>
  <div ref="warpRef" class="warp">
    <div ref="contentRef" class="content">
      <div
        v-for="item in list"
        :key="item.id"
        :data-drag-id="item.id"
        class="move css"
      >
      {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue';
import { scrollbar } from "@nimble-ui/scrollbar"

defineOptions({ name: 'move' });
const list = reactive([
  { id: 1, title: '测试1' },
  { id: 2, title: '测试2' },
  { id: 3, title: '测试3' },
  { id: 4, title: '测试4' },
  { id: 5, title: '测试5' },
  { id: 6, title: '测试6' },
  { id: 7, title: '测试7' },
  { id: 8, title: '测试8' },
  { id: 9, title: '测试9' },
  { id: 10, title: '测试10' },
]);

setTimeout(() => {
  list.push({id: 11, title: "测试11"})
}, 3000)

const warpRef = ref<HTMLElement>();
const contentRef = ref<HTMLElement>();
const getEl = () => warpRef.value;
const { destroy } = scrollbar(getEl, {
  content: () => contentRef.value!,
})
onBeforeUnmount(destroy)
</script>

<style lang="scss">
.warp {
  width: 500px;
  height: 400px;

  .move {
    width: 150px;
    height: 50px;
  }
}
</style>

scrollbar 参数

| 属性名 | 说明 | 类型 | 默认 | | ------- | -------- | ----------------------- | ---- | | el | 元素 | element | () => element | - | | options | 参数 | ScrollOptions | - |

ScrollOptions属性

interface ScrollOptions {
  // 总是显示
  always?: boolean;
  // 最小尺寸
  minSize?: number;
  // 内容元素 必填
  content: Element | (() => Element);
  // 当触发滚动事件时，返回滚动的距离
  onScroll?: (data: { scrollLeft: number; scrollTop: number }) => void;
}

scrollbar 暴露方法

| 属性名 | 说明 | 类型 | | ------------- | ---------------- | ------------------------------------------------------------ | | scrollTo | 滚动到一组特定坐标 | (options: ScrollToOptions | number, yCoord?: number) => void | | setScrollSite | 设置滚动条的距离 | (scrollLeft: number, axis: 'x' | 'y') => void | | thumbColor | 设置滚动条的颜色 | (color: string) => void | | destroy | 销毁绑定事件等 | () => void |