vue 监听页面滚动事件

在vue中监听页面滚动执行一些操作

  mounted(){    window.addEventListener('scroll',this.handleScroll,true)  },
  methods: {
    handleScroll(e){      var scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop;      // 执行代码
    },  }复制代码

html

<div id="app" > 
    <div class="min_container"  @scroll="scrollEvent" > </div>    <div class='go_more' v-if='more_show'  @click='GoMore' >加载更多</div>          <div class='go_more' v-else>没有更多评价了</div>
</div>复制代码

css

.min_container {  padding-top: 1.1rem;  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  overflow-y: auto;}复制代码

js 

    data 

    more_show: true, // 标志是否可以加载更多    more_show: true, // 标志是否可以加载更多    loading: false, // 只有在列表数据获取之后才可以设置为ture 在滚动加载更多的时候使用
复制代码

 methords

 scrollEvent(eve) {
      const that = this      // console.log(      //   eve.srcElement.scrollTop,      //   eve.srcElement.offsetHeight,      //   eve.srcElement.scrollHeight      // );      if (        eve.srcElement.scrollTop + eve.srcElement.offsetHeight >          eve.srcElement.scrollHeight - 10 &&        this.more_show &&        this.loading      ) {
         // 执行函数
         // 中转参数      }    },
复制代码

回调函数

        that.loading = true;        if (that.evaluation_arr.length == that.page_count) {          that.more_show = false;        } else {          that.more_show = true;        }复制代码