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. 补充：使用vue scroller后用原生的监听滚动失效
   页面中原有的吸顶效果是使用监听滚动实现的，但是使用vue scroller后就失效了
   问题代码：

mounted () {
  window.addEventListener('scroll', this.handleScroll, true)
},
methods: {
	if (this) {
        let scrollDom = document.getElementsByClassName('content')[0];
        if (!scrollDom) return;
        this.scrollTop = scrollDom.scrollTop
        if (this.scrollTop > 100) {
          this.searchBarFixed = true
        } else {
          this.searchBarFixed = false
        }
      }
}

解释：一个是浏览器内核控制的滚动，一个是通过transform来实现位移的滚动
解决办法：操作dom，通过计时器监听transform的变化

mounted () {
    /* 受vuescroller影响，不能直接使用监听事件吸顶效果，用了非常麻烦的办法解决了 */
    let _this = this
    this.timer = setInterval(() => {
      let dom = document.getElementsByClassName('_v-content')[0]
      let style = window.getComputedStyle(dom, null)
      let arr = style.transform.split(',')
      let str = arr.pop()
      let top = str.slice(0, str.length - 1)
      if (top < -100) {
        _this.searchBarFixed = true
      } else {
        _this.searchBarFixed = false
      }
    }, 200)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }

6.上边的方案虽然能实现效果，但是很麻烦，如果有什么好的办法再来补充
7.还发现一个问题，用了vuescroll后vux的左右滑动的组件都失灵了，都不能滑动了，项目紧急，暂时没找到解决办法。