[TOC]
## 用組件設置下拉刷新
### 1.安裝組件
```
npm i vant -S
```
### 2.main.js中導入組件
```
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
```
### 3.使用組件
```
<div> //一定要用div將組件包起來，不然會報錯
<van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad">
<div class="home">
<movie-item v-for="(item,index) of movies" :key="index" :movie="item"></movie-item>
</div>
</van-list>
</div>
```
### 4.通過組件中綁定的事件觸發刷新
> onLoad會在頁面加載的時候就觸發該事件，加載初始頁面也可以在這個函數里實現
```
export default {
data() {
return {
list: [],
loading: false,
finished: false
};
},
methods: {
onLoad() {
// 異步更新數據然數據加載完再更新
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加載狀態結束
this.loading = false;
// 數據全部加載完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
}
```
##多個頁面滾動相互影響的問題
~~~
scrollBehavior(){
return{x:0,y:0}
}
~~~
