使用vue编写项目碰到的问题汇总

滚动条监听问题

移动端一般数据较多时，会使用分页查询数据，当页面触底时获取下一页数据。一般使用增加滚动条监听判断是否触底。

使用addEventListener增加scroll监听

在mounted中增加scroll监听，在method中定义handleScroll方法。

注意：最后一个参数要设置为true。否则会不好用

mounted() {
  document.addEventListener("scroll", this.handleScroll, true);
},
methods：{
  handleScroll () {//监听滚动条
     var div = document.getElementById('allmsgbox');
     var leftHeight = div.scrollTop + div.clientHeight;
     var diff = leftHeight - div.scrollHeight;
     if (diff > -1 && diff < 1 && this.isMore) {//滚动条在底部
       this.getMore()//获取更多
     }
  },
}

但是在使用过程中发现，当页面跳转时，因为监听仍在会产生报错，需要在销毁时移除监听。

参数要和增加监听时一样，后面参数也为true，否则移除会失败

destroyed() {
  document.removeEventListener("scroll", this.handleScroll, true);
},

直接在div上使用@scroll监听事件

虽然最后使用removeEventListener移除了监听，解决了问题，但是路由跳转回原先界面时，仍会报错。

所以最终选择了在需要滚动的div上绑定了@scroll监听事件

e.srcElement获取到节点对象

<div class="body" v-if="showList && showList.length > 0" ref="meetingBox" @scroll="handleScroll" >
......
</div>
methods：{
  handleScroll () {//监听滚动条触底
    var leftHeight = e.srcElement.scrollTop + e.srcElement.clientHeight;
    var diff = leftHeight - e.srcElement.scrollHeight;
    if (diff > -1 && diff < 1 && this.isMore) {//滚动条在底部
      this.getMore() //获取更多
    } 
  },
}