当前位置：首页 > VUE

vue实现网页上下滑动

2026-01-12 06:32:45VUE

Vue实现网页上下滑动的方法

使用CSS实现基础滚动

通过CSS的overflow-y属性控制容器滚动，适用于静态内容滚动：

.scroll-container {
  height: 100vh;
  overflow-y: auto;
}

在Vue模板中应用：

<template>
  <div class="scroll-container">
    <!-- 长内容 -->
  </div>
</template>

监听滚动事件

通过@scroll事件监听滚动位置，实现交互逻辑：

<template>
  <div @scroll="handleScroll" class="scroll-container">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(e) {
      console.log('当前滚动位置:', e.target.scrollTop)
    }
  }
}
</script>

使用第三方库（如better-scroll）

安装better-scroll库：

npm install better-scroll

组件内实现：

<template>
  <div ref="scrollWrapper" class="wrapper">
    <div class="content">
      <!-- 可滚动内容 -->
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  mounted() {
    this.scroll = new BScroll(this.$refs.scrollWrapper, {
      scrollY: true,
      click: true
    })
  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  overflow: hidden;
}
</style>

全屏滚动（如vue-fullpage）

安装vue-fullpage插件：

npm install vue-fullpage.js

全局注册后使用：

<template>
  <full-page :options="options">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
  </full-page>
</template>

<script>
export default {
  data() {
    return {
      options: {
        navigation: true,
        anchors: ['page1', 'page2']
      }
    }
  }
}
</script>

动态加载内容滚动

结合AJAX实现无限滚动：

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

<script>
export default {
  data() {
    return {
      items: [],
      isLoading: false
    }
  },
  methods: {
    checkScroll(e) {
      const bottom = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 100
      if (bottom && !this.isLoading) {
        this.loadMore()
      }
    },
    loadMore() {
      this.isLoading = true
      // 模拟异步加载
      setTimeout(() => {
        this.items.push(...newItems)
        this.isLoading = false
      }, 500)
    }
  }
}
</script>