在現(xiàn)如今的 Web 開發(fā)領(lǐng)域，常常需要為網(wǎng)站或應(yīng)用程序添加一些動效特效，以增強用戶的交互體驗。下文將聚焦在 Vue.js 提供的分段滑動效果，并詳細(xì)介紹其實現(xiàn)方法。

Vue.component("scroll-section", {
data() {
return {
currentSection: 0
}
},
props: {
sections: {
type: Array,
required: true
},
sectionHeight: {
type: [String, Number],
default: "100vh"
}
},
methods: {
handleWheel(event) {
const direction = event.deltaY >0 ? 1 : -1;
if (direction === 1 && this.currentSection !== this.sections.length - 1) {
this.currentSection++;
} else if (direction === -1 && this.currentSection !== 0) {
this.currentSection--;
}
}
},
mounted() {
window.addEventListener("wheel", this.handleWheel);
},
beforeDestroy() {
window.removeEventListener("wheel", this.handleWheel);
},
template: `
`
});

上述代碼實現(xiàn)了一個名為 "scroll-section" 的 Vue 組件。該組件接受兩個參數(shù)，分別是一個數(shù)組 "sections" 和一個字符串/數(shù)字 "sectionHeight"。"sections" 數(shù)組中包含了所有的分段內(nèi)容，而 "sectionHeight" 則用于設(shè)置每一段的高度。

組件掛載后，會為 "window" 對象添加一個監(jiān)聽器，以監(jiān)聽用戶在滾動時的滾輪事件。當(dāng)用戶滾動滾輪時，會通過計算方向來判斷當(dāng)前該顯示哪一個分段。如果用戶向下滾動并且當(dāng)前分段不是最后一個分段，則會切換到下一個分段；如果用戶向上滾動并且當(dāng)前分段不是第一個分段，則會切換到上一個分段。

在組件內(nèi)部，通過 "v-for" 指令循環(huán)渲染所有分段，并根據(jù)當(dāng)前顯示的分段為其添加對應(yīng)的 class 樣式。

最后，"slot" 標(biāo)簽用于將分段內(nèi)容傳遞給組件，從而實現(xiàn)分段內(nèi)容的靈活性和可擴展性。