VUE.JS로 무한 스크롤을 만드는 방법

Vue.js로 무한 스크롤을 만드는 방법

저는 최근에 채팅 앱과 페이지 매김이 필요한 다른 페이지의 페이지를 매기는 작업으로 할당되었습니다. 페이지 매김은 훌륭했지만 우리는 새로운 것을 시도하고 싶었고 채팅 앱에서는 큰 아니오입니다.

따라서 해결책은 무한 스크롤을 만드는 것입니다. 이는 현재 매우 일반적이며 Facebook 메신저와 같은 인기 있는 채팅 응용 프로그램에서 볼 수 있습니다.

나는 그것을 달성하는 것이 빠르고 쉬울 것이므로 제 3자를 사용하기로 결정하고 팀에서 승인했으며 이것을 찾았습니다. 무한 로딩 보기 .

해보자!

먼저 설치 무한 로딩 보기 사용

보호된 트위터 계정을 보는 방법

npm i vue-infinite-loading -S

그러면 구현은 다음과 같습니다.

User.vue

  
 
 No more users No more users export default { data: function() { return { page: 2, lastPage: 0, isInit: true, users: {}, } }, created: function() { this.fetchUsers() .then(response => { if (response.data.users.length > 0) { this.users = response.data.users; this.isInit = false; }else{ console.log('No users found.'); } }) .catch(e => console.log(e)) }, methods: { fetchUsers: function() { let url = isInit ? axios.get('api/users') : axios.get(`api/users?page=${this.page}`); return axios.get(url); }, infiniteHandler: function($state) { setTimeout(function () { this.fetchUsers() .then(response => { if (response.data.users.length > 0) { this.lastPage = response.data.pagination.last_page; response.data.users.forEach(message => { this.messages.push(message); }); if (this.page -1 === this.lastPage) { this.page = 2; $state.complete(); } else { this.page += 1; } $state.loaded(); } else { this.page = 2; $state.complete(); } }) .catch(e => console.log(e)); }.bind(this), 1000); } }, }

구성 요소/User.vue

그런 다음 이 예제에서 데이터를 로드하려는 구성 요소에서 |_+_|를 사용할 수 있습니다. 사용자 요소. 에 대한 2개의 슬롯 상태 메시지를 사용자 정의했습니다. 더 이상은 없어 그리고 결과 없음 , 이것을 사용하여 더 많은 것을 추가할 수 있습니다 가이드 .

그런 다음 첨부|_+_| 나머지 사용자를 가져오는 방법입니다. 페이지가 1개뿐이거나 마지막 페이지에 도달하면|_+_| 요청을 중지하고 슬롯 중 하나를 표시하기 위해 호출됩니다. 그렇지 않으면 |_+_| 사용자가 하단에서 스크롤할 때 더 많은 사용자를 계속 로드하기 위해 호출됩니다.

재사용 가능하게 만들기

이것을 리팩토링하여 재사용 가능하게 만들 수 있습니다. 제 경우에는 믹스인 나와 함께 뷰엑스 스토어 |__+_|를 호출하여 모듈.

kishu inu coin buy

믹스인은 다음과 같이 보일 것입니다:
무한 스크롤.js

infinite-loading

mixins/infinite-scroll.js

그리고 예제 구현:

User.vue

아마존 ux 디자인 인턴

infiniteHandler

구성 요소/User.vue

그리고

Post.vue

$state.complete()

구성 요소 / Post.vue

vr 뷰 2 설정

다중 무한 로딩

채팅 앱에서 사용하는 동안 사용자가 메시지 스레드를 클릭한 다음 다른 스레드를 클릭하면 첫 번째 클릭한 스레드의 메시지가 열린 다른 스레드에도 표시되는 버그가 발생했습니다. 내 |_+_|에 이 버그가 있다고 생각하여 수정하는 데 몇 시간이 걸렸습니다. 그러나 그것은 인스턴스 문제였다는 것이 밝혀졌습니다. 따라서 여러 인스턴스를 가지려면 식별자를 추가하고 동적인지 확인합니다.

$state.loaded()

맨위로 스크롤

페이스북 메신저와 같은 인기 있는 채팅 앱과 동일하게 스크롤을 변경하고 싶다면 이 가이드를 따르세요.

#vuejs #자바스크립트 #vue # vue-js

Vue.js로 무한 스크롤을 만드는 방법