vue开发（三）vue-scroller实现下拉刷新，上拉加载笔记

项目中要实现下拉刷新，上拉加载，首先想到了vue-scroller，用起来真的太方便了。
npm网址：vue-scroller

1. 安装依赖：

npm install vue-scroller -D

2. 引入

import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

3. html：

<template>
   <div class="content">
	   <!-- 注意使用的是scroller标签 -->
      <scroller :on-refresh="refresh" 
      			:on-infinite="infinite"
      		    ref="my_scroller">
        <index-income ref="income" 
        			  @finish-refresh="finishRefresh"
        			  @finish-infinite="finishInfinite"
        			  ></index-income>
      </scroller>
  </div>
</template>

4. methods:

methods: {
    /**
     * 下拉刷新
     */
    refresh () {
      console.log("refresh");
      this.$refs.income.ajaxDay()
    },
    /**
     * 结束下拉刷新（因为我的数据请求在子组件中完成，利用父子通信调用结束刷新事件）
     */
    finishRefresh () {
      console.log('refresh over')
      this.$refs.my_scroller.finishPullToRefresh()
    },
     /**
     * 上拉加载
     */
    infinite () {
      console.log("infinite ");
      this.$refs.income.ajaxDay()
    },
    /**
     * 结束上拉加载（因为我的数据请求在子组件中完成，利用父子通信调用结束加载事件）
     */
    finishInfinite () {
      console.log('infinite over')
      this.$refs.my_scroller.finishInfinite()
    },
  },

5. 其他用到后再补充