[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}
}
~~~
