這次給大家帶來怎樣實現Vue下滾動到頁面底部無限加載數據，Vue下滾動到頁面底部無限加載數據的注意事項有哪些，下面就是實戰案例，一起來看一下。
看到一篇Implementing an Infinite Scroll with Vue.js , 覺得挺實用的就看了下, 順便簡單翻譯了一下給需要的人參考.
從這個項目中可以加深對Vue的生命週期的理解, 何時開始axios請求, 如何結合Vue使用原生js來寫scroll事件等等, 我這裡主要是對原文的重點提取和補充
本文技術要點
Vue生命週期
#axios簡單用法
#首先建立一個簡單的vue專案
# vue init webpack-simple infinite-scroll-vuejs
# npm install axios moment
初始化使用者資料
#專案搭建完後, 跑起來看看# npm run dev
<script>
import axios from 'axios'
import moment from 'moment'
export default {
name: 'app',
// 创建一个存放用户数据的数组
data() {
return {
persons: []
}
},
methods: {
// axios请求接口获取数据
getInitialUsers() {
for (var i = 0; i < 5; i++) {
axios.get(`https://randomuser.me/api/`).then(response => {
this.persons.push(response.data.results[0])
})
}
},
formatDate(date) {
if (date) {
return moment(String(date)).format('MM/DD/YYYY')
}
},
beforeMount() {
// 在页面挂载前就发起请求
this.getInitialUsers()
}
}
</script><template>
<p id="app">
<h1>Random User</h1>
<p class="person" v-for="(person, index) in persons" :key="index">
<p class="left">
<img :src="person.picture.large" alt="">
</p>
<p class="right">
<p>{{ person.name.first}} {{ person.name.last }}</p>
<ul>
<li>
<strong>Birthday:</strong> {{ formatDate(person.dob)}}
</li>
<p class="text-capitalize">
<strong>Location:</strong> {{ person.location.city}}, {{ person.location.state }}
</p>
</ul>
</p>
</p>
</p>
</template>
<style lang="scss">
.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>我們接下來需要在methods裡面加上scroll()來監聽滾動, 而這個事件是應該在mounted()這個生命週期內的. 程式碼如下:這段程式碼原文是有一點拼字錯誤的. 我在這裡修正了, 另外增加了距離底部即開始加載數據, 並進行截流.<script>
// ...
methods: {
// ...
scroll(person) {
let isLoading = false
window.onscroll = () => {
// 距离底部200px时加载一次
let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 200
if (bottomOfWindow && isLoading == false) {
isLoading = true
axios.get(`https://randomuser.me/api/`).then(response => {
person.push(response.data.results[0])
isLoading = false
})
}
}
}
},
mounted() {
this.scroll(this.persons)
}
}
</script>登入後複製
滾動到頁面底部無限加載的功能在Vue上實現其實和普通的頁面開發差不多, 每次滾動加載未完成的情況下不會觸發請求下一次, 每次請求push到數組內, 通過的
實現了懶加載(其實0 0我不太認可...), 看完是不是感覺挺簡單的.
最後, 我把這個也弄了一份在GitHub上面, 有需要的可以看看infinite-scroll-vuejs-demo~相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
以上是怎麼實現Vue下滾動到頁面底部無限載入數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
