vue 移动端之下拉刷新

前言

. 最近的一个项目就是设计到一个H5页面的下拉刷新，当时没有想到使用插件，就用使用原生的写下拉 . 移动使用的是vue的框架，做了移动端的适配功能，直接看代码吧,不足之处请指出

mounted() {
    window.addEventListener("scroll", this.lazyLoad)  // 设置滚动条事件
  },
  methods: {
  // 编写懒加载方法，主要就是计算高度差，滚动条高度，页面高度，和屏幕高度。
  // 当滚动条距离底部一定距离的时候就可以执行调用接口
  // 我在这里面是设置一个状态，通过watch 来监听这个属性值得变化，然后直接请求数据
  // 当跳转到另一个页面的时候一定要销毁这个window.addEventListener，执行 window.removeEventListener，可以在beforeDestory中执行，或者如果你的组件使用keep-alive的话，就要监听路由变化，来执行这个销毁步骤
    lazyLoad() {
      let status =
        (this.$refs.musics.$el.scrollHeight || document.body.scrollHeight) <
        (document.documentElement.scrollTop || document.body.scrollTop || this.$refs.musics.$el.scrollHeight)  + (window.screen.height || this.$refs.musics.$el.height) + 150;
        // console.log(status)
        console.log(this.$refs.musics)
        console.log(document.body.scrollTop,document.documentElement.scrollTop,  window.screen.height)
        if(status) {
          this.isLoadLazy = true
        }else {
          this.isLoadLazy = false
        }
    },
},
watch(){
    isLoadLazy(newVal, oldVal){
      if(newVal){
        this.index = this.index + 1
        const data = {
          pageIndex: this.index,
          pageSize: this.pageSize,
          programaNo: this.$route.query.val,
          cn: this.$store.state.cn
        }
        this.showLoading = true
        getAudioList(data).then(res => {
          this.showLoading = false
          if(res.data){
            this.wishList = this.wishList.concat(res.data.list)
            this.isLoadLazy = true;
          }else{
            this.nomore = '1'
            console.log('没有更多数据了')
          }
      });
      }
    }，
    $route(to, from){
        window.removeEventListener("scroll", this.lazyLoad)
    }
}