vue2组件系列第三十二节:PullRefresh 下拉刷新

下拉刷新我们经常会看到一些列表会有这个功能-当我们下拉时，最新的内容会出现在最顶部。

准备工作：

1. 创建一个页面: PullRefresh.vue
2. 在router.js里配置PullRefresh页面的路由

{
 path: '/pullrefresh',
 name: 'pullrefresh',
 component: () => import('./views/PullRefresh.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/pullrefresh')">
 <van-col span="6" class="marb20">
 <van-icon name="eye-o" />
 <div>PullRefresh下拉刷新</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了29个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示PullRefresh 下拉刷新：

基础用法：

<van-pull-refresh
 v-model="isloading"
 @refresh="onRefresh"
 >
 <div style="height: 300px;">刷新次数: {{ count }}</div>
</van-pull-refresh>
data() {
 return {
 count: 0,
 isloading: false,
 }
 },
 methods: {
 onRefresh() {
 setTimeout(() => {
 this.$toast("刷新成功")
 this.count ++
 this.isloading = false
 }, 500)
 },
 goback() {
 this.$router.go(-1)
 } 
},

isloading：是否在加载中。当加载中时，其值会为true。加载完成时，我们需要手动为其设置为false，表示加载完成。

refresh：刷新事件。当下拉刷新时，会触发此事件。为事件的回调函数中可以同步或者异步操作。

loosing-text：释放过程文案

除了在组件里设置文字的属性外，我们还可以加入slot，在这里面修改各个阶段的文字。其值有4个，分别是是normal, pulling, loosing, loading。我们经常能用到的是loosing和loading

loosing：释放过程中顶部内容，即我们在下拉过程当中未松手的时候

loading：加载过程中顶部内容，即我们松手时

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油