vue 滚动条组件 vxe-scrollbar 实现无限滚动加载更多分页数据

• vxe-scrollbar 是一个自定义滚动条组件，支持：
• 通过 h eight、width 设置容器宽高；
  • 通过 x-config、y-config 自定义横向、纵向滚动条；
  • 通过 scroll-boundary.threshold 设置边界阈值；
  • 动到边缘阈值时触发 scroll-boundary 事件；
  • 基于该事件实现无限滚动加载；
  • 支持滚动条宽度、颜色、自动隐藏等配置。

相比浏览器原生滚动条，vxe-scrollbar 更适合需要自定义滚动条样式、监听滚动边界、实现下拉加载/上拉加载的场景。

基础使用

通过 height 设置容器高度，内容超出后会自动出现滚动条。

<template>
  <div>
    <vxe-scrollbar height="300">
      <div v-for="item in 20" :key="item" class="my-scrollbar-item">
        <div>
          {{item}}这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容
        </div>
      </div>
    </vxe-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.my-scrollbar-item {
  margin: 10px 0;
  line-height: 30px;
  width: 6000px;
}
</style>

• 说明：
  • height="300"：容器高度为 300px；也可以使用 style 设置
  • 内容宽度设置为 6000px，因此会出现横向滚动条；
  • 如果内容高度超过 300px，则会出现纵向滚动条；
  • 也可以使用 width 设置容器宽度。

无限滚动加载实现

• 无限滚动加载的核心是：
  • 设置纵向滚动条阈值 yConfig.threshold；
  • 监听 scroll-boundary 事件；
  • 当 direction === 'bottom' 时，触发加载更多；
  • 使用 loading 防止重复请求；
  • 使用 finished 标记是否已经没有更多数据。

<template>
  <div>
    <vxe-scrollbar height="300" :loading="loading" :y-config="yConfig" @scroll-boundary="scrollBoundaryEvent">
      <div v-for="item in myList" :key="item.id" class="my-scrollbar-item">
        <div>
          {{item.name}}这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容
        </div>
      </div>
    </vxe-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const loading = ref(false)
const myList = ref([])
let rowKey = 1000000

const yConfig = reactive({
  threshold: 40
})

const loadList = (size) => {
  if (loading.value) {
    return
  }
  // 模拟后端接口
  loading.value = true
  setTimeout(() => {
    const dataList = []
    for (let i = 0; i < size; i++) {
      rowKey++
      dataList.push({
        id: rowKey,
        name: 'Test' + rowKey
      })
    }
    myList.value = [...myList.value, ...dataList]
    loading.value = false
  }, 300)
}

const scrollBoundaryEvent = (eventParams) => {
  console.log(`direction：${eventParams.direction} isTop：${eventParams.isTop} isBottom：${eventParams.isBottom} isLeft：${eventParams.isLeft} isRight：${eventParams.isRight}`)
  switch (eventParams.direction) {
    case 'top':
      console.log('触发顶部阈值范围')
      break
    case 'bottom':
      console.log('触发底部阈值范围')
      loadList(20)
      break
    case 'left':
      console.log('触发左侧阈值范围')
      break
    case 'right':
      console.log('触发右侧阈值范围')
      break
  }
}

loadList(20)
</script>

<style lang="scss" scoped>
.my-scrollbar-item {
  margin: 10px 0;
  line-height: 30px;
  width: 6000px;
}
</style>

自定义滚动条

通过 x-config 配置横向滚动条，通过 y-config 配置纵向滚动条

常见配置包括：

配置项	说明
xConfig.height	横向滚动条高度
yConfig.width	纵向滚动条宽度
xConfig.autoHide	横向条动自动隐藏
yConfig.autoHide	纵向滚动条自动隐藏
xConfig.threshold	横向边界触发阈值
yConfig.threshold	纵向边界触发阈值

scroll-boundary 事件参数

scroll-boundary 事件会在滚动到指定阈值范围时触发，参数如下：

参数	说明	类型
direction	触发方向：top、bottom、left、right	string
isTop	是否到达顶部阈值	boolean
isBottom	是否到达底部阈值	boolean
isLeft	是否到达左侧阈值	boolean
isRight	是否到达右侧阈值	boolean

• 通常只需要根据 direction 判断：
  • 下拉加载：direction === 'top'
  • 上拉加载：direction === 'bottom'
  • 左拉加载：direction === 'left'
  • 右拉加载：direction === 'right'

常用属性

属性	说明	类型
height	容器高度	string / number
width	容器宽度	string / number
loading	是否处于加载状态	boolean
x-config	横向滚动条配置	object
y-config	纵向滚动条配置	object
scroll	滚动时触发	event
scroll-boundary	滚动到边界阈值时触发	event

vxe-scrollbar 通过 height、width 控制容器尺寸，通过 x-config、y-config 自定义滚动条样式，再配合 scroll-boundary 事件和 threshold 阈值，可以很方便地实现无限滚动加载。

基础场景只需要设置高度和内容；
自定义场景可以配置滚动条宽度、颜色和自动隐藏；
无限加载场景则监听 scroll-boundary，在 direction === 'bottom' 时加载更多，并用 loading、finished 控制请求状态。

整体实现简单、灵活，适合在 Vue 3 项目中用于自定义滚动区域和滚动加载场景。

https://vxeui.com