vux-scroller实现移动端上拉加载功能过程解析

npm install vux --save　

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
 plugins: ['vux-ui']
})

import { Scroller } from 'vux'

　　//height是设置滚动区域高度，vux对该组件声明的不够详细，多次调试-170是可以使用，如有更好的算法或者理解欢迎跟博主沟通交流
　　//on-scroller-bottom 滚动事件 这个事件在滚动的时候会进行多次触发
　　//scroll-bottom-offst 在底部什么位置触发事件，这里配置的是距离底部200px的地方滑动就可以触发
　　//ref 给scroller组件添加ref方便操作DOM，这是个小技巧，后面会用到
 <scroller height="-170" lock-x @on-scroll-bottom="onScrollBottom" :scroll-bottom-offst="200" ref="scrollerBottom">
　　//scroller标签内部必须包裹一层div，小技巧，不然会出现滑不到底部的问题
　　// 这个div的高度必须要高于底部滚动区域的高度，不然滚动不了
 　　<div>
　　　　　　<p>滚动内容区域</p>
　　 </div>　
　　　　
　　　　//这个div是展示提示信息的
　　　 <div>
　　　　<div id="title" style="width:100%;text-align:center;height:30px;ling-height:30px;margin-top:20px;">上拉加载更多</div>
　　　　</div>
 </scroller>

  // 上拉加载滑动的方法
  onScrollBottom () {
　　　　//onFetching是个状态变量，默认值设为false来进行控制触发事件及更改提示信息
   if (this.onFetching) {
   } else {
　　　　//默认值onFetching为false，所以提示信息首先就是加载中，我们这里用的是原生的DOM操作方法
    document.getElementById("title").innerHTML="加载中...";
　　　　　//onFetching赋值为true，下次触发的时候会触发onFetching为true的情况
    this.onFetching = true;
    setTimeout(() => {
　　　　　　　//此处的pageNum是当前页码，默认为1，每滑动一次都this.pageNum++然后传入参数调用接口
      this.pageNum+=1;
      this.$nextTick(() => {
      this.$refs.scrollerBottom.reset()
     })
　　　　　　　　//后台请求接口
      this.$http({
       url:"traderecords/getPersonTradDetail",
       method:"get",
       params:{
         pageSize:10,
　　　　　　　　　　//动态的给pageNum赋值，保证每次的参数都不一样，后台传过来的数据也不一样
         pageNum:this.pageNum,
         brandId:this.$route.query.brandId,
         date:this.value2
       }
     }).then((res)=>{ 
       console.log(res.data.data.rowMaps);
　　　　　　　　//如果接口请求成功
       if(res.data.code==200){
　　　　　　　　　　//接口请求成功并且返回的数组的长度<10不够一页的时候
        if(res.data.data.rowMaps.length<10){
　　　　　　　　　　// end是控制提示信息的，不触发滑动的时候是不展示的，默认值为false
         this.end=true;
　　　　　　　　　　//返回的数组长度不够一页的时候提示信息修改为没有更多数据
         document.getElementById("title").innerHTML="没有更多数据了...";
        // 当数组长度小于10时，该方法禁用
         this.$refs.scrollerBottom.disablePullup() ;
        }
        else{
　　　　　　　　　　//否则提示信息为加载成功
         document.getElementById("title").innerHTML="加载成功";
        }
　　　　　　　　　　　　/https://img.qb5200.com/download-x/dataList是我声明的空数组，用concat方法把新数组和后台返回的数据进行拼接然后重新赋值给dataList，这个是关键
          this.dataList=this.dataList.concat(res.data.data.rowMaps);
          console.log(this.dataList); 
　　　　　　　　　　　　//加载成之后提示信息改为上拉加载更多
          document.getElementById("title").innerHTML="上拉加载更多";
       }
　　　　　　　　　　//再把onFetching的状态值改为false
       this.onFetching = false 
     })
      
    }, 500)
   }
  },