Vue是一款非常流行的JavaScript前端框架，可以通過它優(yōu)雅的構建web頁面。在構建頁面的過程中，滾動是非常重要的一個部分。在下面的代碼片段中，我們將介紹如何使用Vue實現(xiàn)網(wǎng)頁滾動。

<template>
<div class="wrapper" ref="wrapper" @scroll="onScroll">
<div v-for="(item, index) in list" :key="index">{{ item }}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"],
};
},
methods: {
onScroll() {
const wrapper = this.$refs.wrapper;
if (
wrapper.scrollTop +
wrapper.clientHeight >=
wrapper.scrollHeight
) {
console.log("到底了");
}
},
},
};
</script>

上面代碼中，我們定義了一個wrapper元素作為滾動容器，同時通過ref屬性獲取它的引用。在onScroll方法中，我們計算滾動容器的scrollTop、clientHeight和scrollHeight屬性，并判斷是否到達底部。如果到達底部，控制臺會輸出“到底了”這個信息。

此外，在Vue中還有一些適配移動端滾動的插件，例如BetterScroll和VueScroller。它們提供了更加方便的方式來控制滾動，讓我們的頁面更加流暢。