vue实现滚动列表

Vue 实现滚动列表的方法

使用 CSS 实现基础滚动

通过 CSS 的 overflow 属性可以快速实现滚动效果。适用于静态列表或简单动态内容。

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

<style>
.scroll-container {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #eee;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>

使用第三方库实现高性能滚动

对于大数据量或需要高性能的场景，推荐使用 vue-virtual-scroller 等虚拟滚动库。

安装依赖：

npm install vue-virtual-scroller

示例代码：

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

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

export default {
  components: {
    RecycleScroller
  },
  data() {
    return {
      items: [...Array(1000).keys()].map(i => ({
        id: i,
        text: `Item ${i}`
      }))
    }
  }
}
</script>

<style>
.scroller {
  height: 300px;
}
.item {
  height: 50px;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
</style>

实现无限滚动加载

结合滚动事件监听和 API 调用可以实现无限滚动加载更多数据。

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

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      hasMore: true
    }
  },
  methods: {
    async loadItems() {
      if (!this.hasMore || this.loading) return

      this.loading = true
      const newItems = await this.fetchItems(this.page)
      this.items = [...this.items, ...newItems]
      this.page++
      this.hasMore = newItems.length > 0
      this.loading = false
    },
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      if (scrollHeight - (scrollTop + clientHeight) < 50) {
        this.loadItems()
      }
    }
  },
  mounted() {
    this.loadItems()
  }
}
</script>

实现平滑滚动动画

通过 CSS 过渡或 JavaScript 动画可以实现更平滑的滚动效果。

.scroll-container {
  scroll-behavior: smooth;
}

或者使用 JavaScript 实现：

methods: {
  scrollTo(position) {
    const container = this.$el.querySelector('.scroll-container')
    container.scrollTo({
      top: position,
      behavior: 'smooth'
    })
  }
}

实现横向滚动

调整 CSS 属性即可实现横向滚动效果。

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

<style>
.horizontal-scroll {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 0;
}
.item {
  display: inline-block;
  width: 200px;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>