Thực hiện cuộn vô hạn với Vue.js

Cuộn vô hạn có vị trí của chúng trên web, nhưng nó không dành cho mọi trang web hoặc ứng dụng. Chúng đặc biệt hữu ích khi bạn cần tải một lượng lớn dữ liệu hoặc hình ảnh khi user cần chúng thay vì cùng một lúc. Các phương tiện truyền thông xã hội như Twitter, Facebook và Instagram đã phổ biến điều này trong nhiều năm. Tích hợp cuộn vô hạn của bạn trên trang web hoặc ứng dụng của bạn dễ dàng hơn bạn nghĩ.

Bài viết này sẽ sử dụng API user ngẫu nhiên . API tự mô tả là “Giống như Lorem Ipsum, nhưng dành cho mọi người”. Nó không chỉ tuyệt vời cho việc triển khai này mà còn rất hữu ích cho việc giả mạo profile user cho các dự án trong tương lai.

Trước khi bạn bắt đầu, hãy tạo một dự án Vue.js mới bằng cách sử dụng mẫu webpack-simple Vue CLI . Ví dụ này sẽ sử dụng Axios và MomentJS để tìm nạp dữ liệu và định dạng ngày tháng.

$ vue init webpack-simple infinite-scroll-vuejs

Nhận dữ liệu user ban đầu

Có nhiều gói npm khác nhau cho cuộn vô hạn mà bạn có thể sử dụng cho ứng dụng Vue của bạn , nhưng một số trong số này có thể quá mức cần thiết. Đối với bài đăng này, ta sẽ không có plugin hoặc gói và ta sẽ viết một hàm JavaScript đơn giản để tìm nạp một tập hợp dữ liệu mới khi được cuộn xuống cuối cửa sổ trình duyệt.

Trước khi bắt đầu tích hợp cuộn vô hạn, hãy tìm nạp và đặt một số dữ liệu ban đầu khi tải trang:

App.vue

data () {
  return {
    persons: []
  }
},
methods: {
  getInitialUsers () {
    for (var i = 0; i < 5; i++) {
      axios.get(`https://randomuser.me/api/`)
        .then(response => {
          this.persons.push(response.data.results[0]);
        });
    }
  }
},
beforeMount() {
  this.getInitialUsers();
}

Cần lưu ý không nên thực hiện năm cuộc gọi dịch vụ khi đang tải. API user ngẫu nhiên chỉ trả về một user ngẫu nhiên tại một thời điểm. Vì vậy, để có được năm user ban đầu, cần phải có năm cuộc gọi dịch vụ.

Nếu bạn điều khiển mảng ghi log persons của bạn hoặc mở Vue Devtools , bạn sẽ thấy một mảng gồm năm user . Nếu vậy, tuyệt vời! Hãy lặp lại dữ liệu này trong template , tạo kiểu cho chúng và tiếp tục:

App.vue

<template>
  <div id="app">
    <h1>Random User</h1>
    <div class="person" v-for="person in persons">
      <div class="left">
        <img :src="person.picture.large">
      </div>
      <div class="right">
        <p>{{ person.name.first }} {{ person.name.last }}</p>
        <ul>
          <li>
            <strong>Birthday:</strong> {{ formatDate(person.dob) }}
          </li>
          <li class="text-capitalize">
            <strong>Location:</strong> {{ person.location.city }},
            {{ person.location.state }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
...
</script>

<style lang="scss">
 /* Optional Styles */
 .person {
    background: #ccc;
    border-radius: 2px;
    width: 20%;
    margin: 0 auto 15px auto;
    padding: 15px;

    img {
      width: 100%;
      height: auto;
      border-radius: 2px;
    }

    p:first-child {
      text-transform: capitalize;
      font-size: 2rem;
      font-weight: 900;
    }

    .text-capitalize {
      text-transform: capitalize;
    }
  }
</style>

Triển khai Logic cuộn vô hạn

Bây giờ cho lý do tại sao bạn ở đây ... cuộn vô hạn! Trong các methods của thành phần, bạn cần tạo một hàm mới được gọi là scroll() và đã tải hàm đó trong phương thức vòng đời mounted() .

Phương thức scroll() này phải có một điều kiện đơn giản là tính toán phần cuối của trang, đánh giá nó là đúng hay sai và thực thi một cái gì đó. Ta sẽ sử dụng các thuộc tính documentElement.scrollTop, documentElement.offsetHeight của đối tượng documentElement.scrollTop documentElement.offsetHeight và các thuộc tính innerHeight của innerHeight để xác định xem cuộn như ở dưới cùng:

window.onscroll = () => {
  let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

  if (bottomOfWindow) {
    // Do something, anything!
  }
};

Bên trong điều kiện này, hãy thêm phương thức dịch vụ GET với Axios để tìm nạp một user ngẫu nhiên khác từ API user ngẫu nhiên.

App.vue

methods: {
  ...,
  scroll (person) {
    window.onscroll = () => {
      let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

      if (bottomOfWindow) {
        axios.get(`https://randomuser.me/api/`)
          .then(response => {
            this.persons.push(response.data.results[0]);
          });
      }
    };
  },
},
mounted() {
  this.scroll(this.person);
}

Hàm này thực hiện một cuộc gọi dịch vụ và thêm một “ user ” ngẫu nhiên mới vào mảng persons chỉ khi user cuộn xuống cuối trang. Đến đây, bạn có thể cuộn… vô hạn và thấy một “ user ” mới mỗi lần.

Kết luận

Di chuyển vô hạn nghe có vẻ đáng sợ nhưng như đã chứng minh, nó khá đơn giản. Với mỗi lần cuộn xuống cuối trang, ta tìm nạp dữ liệu mới bằng Axios, sau đó đẩy dữ liệu đó vào một mảng. Để tải hình ảnh một cách chậm rãi, chỉ cần đẩy một nguồn hình ảnh vào một mảng dữ liệu, lặp qua nó trong template của bạn và liên kết <img :src=""> với mảng.

Tags:

Các tin liên quan