vue js one page scroll

VueJS
Created At :
Views 👀 :

การสร้างหน้าเว็บ One Page Scroll ใน Vue.js ต้องใช้การนำเสนอข้อมูลแบบไล่ลำดับ (scrolling) ที่อนุญาตให้ผู้ใช้เลื่อนลงหน้าเว็บและแสดงข้อมูลที่ต่างกันในแต่ละหน้า นี่คือวิธีสร้าง One Page Scroll ใน Vue.js:

  1. สร้าง Vue Project:

ถ้าคุณยังไม่มีโปรเจกต์ Vue สามารถใช้ Vue CLI เพื่อสร้างโปรเจกต์ Vue ใหม่ได้ดังนี้:

1
vue create one-page-scroll-app
  1. สร้าง Component สำหรับแต่ละหน้า:

สร้าง component สำหรับแต่ละหน้าของ One Page Scroll ของคุณ เช่นหากคุณมีหน้าแรกและหน้าสองคุณสามารถสร้างสอง component ได้เช่นนี้:

1
2
vue generate component Page1
vue generate component Page2
  1. แก้ไข Component Templates:

แก้ไข template ของแต่ละ component เพื่อใส่เนื้อหาที่คุณต้องการแสดงในแต่ละหน้า:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Page1.vue -->
<template>
  <div class="page">
    <h1>Page 1</h1>
    <!-- เนื้อหาหน้าแรก -->
  </div>
</template>

<!-- Page2.vue -->
<template>
  <div class="page">
    <h1>Page 2</h1>
    <!-- เนื้อหาหน้าสอง -->
  </div>
</template>
  1. สร้าง Container Component:

สร้าง container component ที่จะบรรจุหน้าทั้งหมดของ One Page Scroll และใช้การนำเสนอข้อมูลแบบไล่ลำดับ (scrolling) เพื่อสลับระหว่างหน้า:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- App.vue -->
<template>
  <div id="app">
    <div class="container">
      <page1 v-if="currentPage === 1" @scroll="scrollToPage(2)" />
      <page2 v-else @scroll="scrollToPage(1)" />
    </div>
  </div>
</template>

<script>
import Page1 from './components/Page1.vue'
import Page2 from './components/Page2.vue'

export default {
  data() {
    return {
      currentPage: 1,
    }
  },
  components: {
    Page1,
    Page2,
  },
  methods: {
    scrollToPage(pageNumber) {
      this.currentPage = pageNumber
    },
  },
}
</script>

<style>
.container {
  height: 100vh;
  overflow: hidden;
}
.page {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
</style>

ใน container component (App.vue) นี้ เราใช้การนำเสนอข้อมูลแบบไล่ลำดับเพื่อสลับระหว่าง Page1 และ Page2 โดยใช้เงื่อนไข v-if และ v-else สำหรับการแสดงหน้าแต่ละหน้า และเราใช้ event @scroll เพื่อกลับไปยังหน้าก่อนหน้าหรือหน้าถัดไปเมื่อผู้ใช้เลื่อน.

  1. ตั้งค่า CSS:

เพิ่มสไตล์ CSS เพื่อตกแต่งหน้าแต่ละหน้าและ container component ตามที่คุณต้องการ.

  1. **รันแอปพลิเคชัน

:**

เมื่อคุณเสร็จสิ้นการกำหนดค่า One Page Scroll ของคุณ ให้รันแอปพลิเคชัน Vue ด้วยคำสั่ง:

1
npm run serve

หรือ

1
yarn serve

แล้วเข้าถึงแอปพลิเคชันในเบราว์เซอร์ของคุณ คุณจะสามารถเลื่อนลงและเรียกดูหน้าแต่ละหน้าของ One Page Scroll ได้ตามลำดับ.

นี่คือวิธีการสร้าง One Page Scroll ใน Vue.js โดยการใช้การนำเสนอข้อมูลแบบไล่ลำดับเพื่อแสดงข้อมูลที่แตกต่างกันในแต่ละหน้าของแอปพลิเคชัน Vue ของคุณ.

©2023 Love Computer