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是設(shè)置滾動(dòng)區(qū)域高度，vux對該組件聲明的不夠詳細(xì)，多次調(diào)試-170是可以使用，如有更好的算法或者理解歡迎跟博主溝通交流
　　//on-scroller-bottom 滾動(dòng)事件 這個(gè)事件在滾動(dòng)的時(shí)候會進(jìn)行多次觸發(fā)
　　//scroll-bottom-offst 在底部什么位置觸發(fā)事件，這里配置的是距離底部200px的地方滑動(dòng)就可以觸發(fā)
　　//ref 給scroller組件添加ref方便操作DOM，這是個(gè)小技巧，后面會用到
 <scroller height="-170" lock-x @on-scroll-bottom="onScrollBottom" :scroll-bottom-offst="200" ref="scrollerBottom">
　　//scroller標(biāo)簽內(nèi)部必須包裹一層div，小技巧，不然會出現(xiàn)滑不到底部的問題
　　// 這個(gè)div的高度必須要高于底部滾動(dòng)區(qū)域的高度，不然滾動(dòng)不了
 　　<div>
　　　　　　<p>滾動(dòng)內(nèi)容區(qū)域</p>
　　 </div>　
　　　　
　　　　//這個(gè)div是展示提示信息的
　　　 <div>
　　　　<div id="title" style="width:100%;text-align:center;height:30px;ling-height:30px;margin-top:20px;">上拉加載更多</div>
　　　　</div>
 </scroller>

  // 上拉加載滑動(dòng)的方法
  onScrollBottom () {
　　　　//onFetching是個(gè)狀態(tài)變量，默認(rèn)值設(shè)為false來進(jìn)行控制觸發(fā)事件及更改提示信息
   if (this.onFetching) {
   } else {
　　　　//默認(rèn)值onFetching為false，所以提示信息首先就是加載中，我們這里用的是原生的DOM操作方法
    document.getElementById("title").innerHTML="加載中...";
　　　　　//onFetching賦值為true，下次觸發(fā)的時(shí)候會觸發(fā)onFetching為true的情況
    this.onFetching = true;
    setTimeout(() => {
　　　　　　　//此處的pageNum是當(dāng)前頁碼，默認(rèn)為1，每滑動(dòng)一次都this.pageNum++然后傳入?yún)?shù)調(diào)用接口
      this.pageNum+=1;
      this.$nextTick(() => {
      this.$refs.scrollerBottom.reset()
     })
　　　　　　　　//后臺請求接口
      this.$http({
       url:"traderecords/getPersonTradDetail",
       method:"get",
       params:{
         pageSize:10,
　　　　　　　　　　//動(dòng)態(tài)的給pageNum賦值，保證每次的參數(shù)都不一樣，后臺傳過來的數(shù)據(jù)也不一樣
         pageNum:this.pageNum,
         brandId:this.$route.query.brandId,
         date:this.value2
       }
     }).then((res)=>{ 
       console.log(res.data.data.rowMaps);
　　　　　　　　//如果接口請求成功
       if(res.data.code==200){
　　　　　　　　　　//接口請求成功并且返回的數(shù)組的長度<10不夠一頁的時(shí)候
        if(res.data.data.rowMaps.length<10){
　　　　　　　　　　// end是控制提示信息的，不觸發(fā)滑動(dòng)的時(shí)候是不展示的，默認(rèn)值為false
         this.end=true;
　　　　　　　　　　//返回的數(shù)組長度不夠一頁的時(shí)候提示信息修改為沒有更多數(shù)據(jù)
         document.getElementById("title").innerHTML="沒有更多數(shù)據(jù)了...";
        // 當(dāng)數(shù)組長度小于10時(shí)，該方法禁用
         this.$refs.scrollerBottom.disablePullup() ;
        }
        else{
　　　　　　　　　　//否則提示信息為加載成功
         document.getElementById("title").innerHTML="加載成功";
        }
　　　　　　　　　　　　//dataList是我聲明的空數(shù)組，用concat方法把新數(shù)組和后臺返回的數(shù)據(jù)進(jìn)行拼接然后重新賦值給dataList，這個(gè)是關(guān)鍵
          this.dataList=this.dataList.concat(res.data.data.rowMaps);
          console.log(this.dataList); 
　　　　　　　　　　　　//加載成之后提示信息改為上拉加載更多
          document.getElementById("title").innerHTML="上拉加載更多";
       }
　　　　　　　　　　//再把onFetching的狀態(tài)值改為false
       this.onFetching = false 
     })
      
    }, 500)
   }
  },