vue监听滚动事件滚动加载

监听元素内部滚动条事件，滚动到底部加载数据，也可以使用插件进行滚动加载处理

方法一、监听滚动条事件滚动加载

1、dom结构：最外层dom

<div class="scrollWrap"> </div>

2、mounted:初始化监听

//mounted监听处理

this.$nextTick (() => {
       if (document.querySelector ('.scrollWrap')) {
            const selectWrap = document.querySelector ('.scrollWrap');
            selectWrap.addEventListener ('scroll', this.scrollLoadMore);
       }
});

3、this.scrollLoadMore:方法 ------- 主要

/**
  * 监听滚动条
  * scrollTop为滚动条在Y轴上的滚动距离。
  * clientHeight为内容滚动区域的高度。
  * scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
* */
scrollLoadMore () {
      let scrollWrap = document.querySelector ('.scrollWrap');
      var currentScrollTop = scrollWrap.scrollTop;
      var currentOffsetHeight = scrollWrap.scrollHeight;
      var currentClientHeight = scrollWrap.clientHeight;
      if ((currentScrollTop + currentClientHeight === currentOffsetHeight) && (this.pageConfig.pageNum <= this.pageConfig.pages)) {
          //到底部了 重新请求数据
          this.pageConfig.pageNum++; //页码++
          //TODO 执行加载数据方法
       }
}

4、滚动加载数据方面处理

//oriResult:[];  存储源数据
//dataList:[]; 存储渲染列表数据
//result后台返回数据

this.dataList = this.oriResult.concat (result);
this.oriResult = this.dataList;

 

方法二：使用vue插件：vue-pull-to

1、安装：

npm install vue-pull-to --save

2、引用注册

引用：
import PullTo from 'vue-pull-to';


注册：
components: {
    PullTo
}

3、使用：

官网地址：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md

<pull-to
        :bottom-config="BOTTOM_DEFAULT_CONFIG" 
        :top-config="TOP_DEFAULT_CONFIG"
        :is-top-bounce="false"
        :is-bottom-bounce="false"
        @infinite-scroll="scrollLoadMore" //请求数据方法
>

    <li class="TaskLine" v-for="(item,index) of list" :key="item.index">
        <div></div>
        <div></div>
        <div></div>
    </li>

</pull-to>


scrollLoadWeikeMore () {
    this.pageConfig.pageNum++;
    // 加载数据
}

 

//下拉配置
const TOP_DEFAULT_CONFIG = {
        pullText: '下拉刷新', // 下拉时显示的文字
        triggerText: '释放更新', // 下拉到触发距离时显示的文字
        loadingText: '', // 加载中的文字
        doneText: '加载完成', // 加载完成的文字
        failText: '加载失败', // 加载失败的文字
        loadedStayTime: 400, // 加载完后停留的时间ms
        stayDistance: 50, // 触发刷新后停留的距离
        triggerDistance: 70,// 下拉刷新触发的距离
};

//上拉配置
const BOTTOM_DEFAULT_CONFIG = {
        pullText: '上拉加载',
        triggerText: '释放更新',
        loadingText: '加载中...',
        doneText: '加载完成',
        failText: '加载失败',
        loadedStayTime: 400,
        stayDistance: 50,
        triggerDistance: 70
};

 

交流
可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。