Sard

Appearance

100%
在新窗口打开⤴

ScrollList横向滚动列表

介绍 ​

给横向滚动容器添加模拟滚动条，一般用于同时展示多个商品、分类列表的场景。

代码演示 ​

基础使用 ​

在默认插槽里编写任意内容。

vue
<template>
  <s-scroll-list>
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
import { ref } from 'vue'

const rows = ref(
  Array(16)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({
          text: '文字' + (i + 1),
        })
        return rows
      },
      [[], []],
    ),
)
</script>
vue
<template>
  <s-scroll-list>
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
import { ref } from 'vue'
const rows = ref(
  Array(16)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({ text: '文字' + (i + 1) })
        return rows
      },
      [[], []],
    ),
)
</script>

滚动条颜色 ​

使用 scrollbar-bg 属性设置滚动条背景色，使用 thumb-bg 属性设置滑块背景色。

也可以通过 css 变量设置。

vue
<template>
  <s-scroll-list
    scrollbar-bg="rgba(var(--s-color-danger-rgb), 0.2)"
    thumb-bg="var(--s-color-danger)"
  >
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
import { ref } from 'vue'

const rows = ref(
  Array(16)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({
          text: '文字' + (i + 1),
        })
        return rows
      },
      [[], []],
    ),
)
</script>
vue
<template>
  <s-scroll-list
    scrollbar-bg="rgba(var(--s-color-danger-rgb), 0.2)"
    thumb-bg="var(--s-color-danger)"
  >
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
import { ref } from 'vue'
const rows = ref(
  Array(16)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({ text: '文字' + (i + 1) })
        return rows
      },
      [[], []],
    ),
)
</script>

动态数据 ​

组件内部能够通过观察滚动内容宽度变化，动态调整滑块的宽度。

vue
<template>
  <s-scroll-list>
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>

  <s-slider v-model="count" :min="1" :max="10" show-scale class="mt-6" />
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
import { computed, ref } from 'vue'

const count = ref(8)

const rows = computed(() => {
  return Array(count.value * 2)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({
          text: '文字' + (i + 1),
        })
        return rows
      },
      [[], []],
    )
})
</script>
vue
<template>
  <s-scroll-list>
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>

  <s-slider v-model="count" :min="1" :max="10" show-scale class="mt-6" />
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
import { computed, ref } from 'vue'
const count = ref(8)
const rows = computed(() => {
  return Array(count.value * 2)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({ text: '文字' + (i + 1) })
        return rows
      },
      [[], []],
    )
})
</script>

隐藏滚动条 ​

如果滚动内容宽度小于滚动容器的宽度，会自动隐藏滚动条。

vue
<template>
  <s-scroll-list>
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>
</template>

<script setup lang="ts">
import { Image } from '@sard/icons'
import { ref } from 'vue'

const rows = ref(
  Array(8)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({
          text: '文字' + (i + 1),
        })
        return rows
      },
      [[], []],
    ),
)
</script>
vue
<template>
  <s-scroll-list>
    <div class="flex flex-col gap-5">
      <div v-for="(row, i) in rows" :key="i" class="flex gap-8">
        <div
          v-for="(item, j) in row"
          :key="j"
          class="flex flex-col justify-center items-center w-15 flex-none"
        >
          <Image class="text-2xl" />
          <div class="mt-2 text-sm text-(--s-text-color-secondary)">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </s-scroll-list>
</template>

<script setup lang="js">
import { Image } from '@sard/icons'
import { ref } from 'vue'
const rows = ref(
  Array(8)
    .fill(0)
    .reduce(
      (rows, _, i) => {
        rows[i % 2].push({ text: '文字' + (i + 1) })
        return rows
      },
      [[], []],
    ),
)
</script>

API ​

ScrollListProps ​

属性描述类型默认值
scrollbar-width滚动条宽度string-
scrollbar-bg滚动条的背景色string-
thumb-bg滑块的的背景色string-

ScrollListSlots ​

插槽描述属性
default自定义默认内容-

ScrollListEmits ​

事件描述类型
scroll滚动时触发( event: Event) => void

主题定制 ​

样式变量 ​

CSS 变量值
--s-scroll-list-scrollbar-width50px
--s-scroll-list-scrollbar-height4px
--s-scroll-list-scrollbar-margin-topvar(--s-size)
--s-scroll-list-scrollbar-bgvar(--s-fill-color-secondary)
--s-scroll-list-scrollbar-thumb-bgvar(--s-color-primary)

Released under the MIT License.

Copyright © 2023-present wuzhitao