vue实现列表滚动

Vue 实现列表滚动的方法

使用 CSS 实现滚动

通过 CSS 的 overflow 属性可以快速实现列表滚动效果。适用于简单场景。

<template>
  <div class="scroll-container">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<style>
.scroll-container {
  height: 300px;
  overflow-y: auto;
}
</style>

使用第三方库

对于更复杂的滚动需求，可以使用专门针对 Vue 的滚动库如 vue-virtual-scroller 或 better-scroll。

安装 better-scroll：

npm install better-scroll

基本用法：

<template>
  <div ref="wrapper" class="wrapper">
    <ul class="content">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  data() {
    return {
      items: [...]
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true
    })
  }
}
</script>

<style>
.wrapper {
  height: 300px;
  overflow: hidden;
}
</style>

虚拟滚动优化

对于超长列表，建议使用虚拟滚动技术来优化性能。vue-virtual-scroller 是专门为此设计的库。

安装：

npm install vue-virtual-scroller

使用示例：

<template>
  <RecycleScroller
    class="scroller"
    :items="items"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">
      {{ item.text }}
    </div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: [...]
    }
  }
}
</script>

<style>
.scroller {
  height: 300px;
}
.item {
  height: 50px;
}
</style>

自定义滚动行为

需要实现特定滚动行为时，可以监听滚动事件并手动控制。

<template>
  <div class="scroll-container" ref="container" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      scrollPosition: 0
    }
  },
  methods: {
    handleScroll() {
      this.scrollPosition = this.$refs.container.scrollTop
      // 自定义逻辑
    },
    scrollTo(position) {
      this.$refs.container.scrollTo({
        top: position,
        behavior: 'smooth'
      })
    }
  }
}
</script>

无限滚动加载

结合滚动事件实现无限滚动加载更多数据的功能。

<template>
  <div class="scroll-container" ref="container" @scroll="handleScroll">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      <li v-if="loading">加载中...</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...],
      loading: false,
      page: 1
    }
  },
  methods: {
    handleScroll() {
      const container = this.$refs.container
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
        this.loadMore()
      }
    },
    async loadMore() {
      if (this.loading) return
      this.loading = true
      try {
        const newItems = await fetchMoreData(this.page++)
        this.items.push(...newItems)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

选择哪种方法取决于具体需求：简单滚动用 CSS，复杂交互用第三方库，大数据量用虚拟滚动，特定需求可自定义实现。