本文將講述vue-cli+vux-scroller實現移動端的上拉加載功能：
糾錯聲明：網上查閱資料看到很多人都將vux和vuex弄混，在這里我們先解釋一下，vuex是vue框架自帶的組件，是數據狀態管理工具，vux是一款移動端的UI組件庫；
vux（官方文檔：https://doc.vux.li/zh-CN/）是基於WeUi和vue（2.x）開發的移動端的UI組件庫，主要服務於微信頁面。基於webpack+vue-loader+vux可以快速開發移動端頁面，配合vux-loader方便你在WeUi的基礎上定制需要的樣式。vux-loader保證了組件按需使用，因此不用擔心最終打包了整個vux的組件庫代碼。vux並不完全依賴於WeUi，vux在WeUi的基礎上擴展了多個常用組件，但是盡量保持整體UI樣式接近WeUi的設計規范。
首先我們需要安裝vux的依賴包，命令如下：
npm install vux --save
官方文檔聲明了vux必須配合vux-loader一起使用，所以我們需要在build/webpack.base.conf.js里參照如下代碼進行配置：
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
vux的Scroller組件為我們提供了上拉加載和下拉刷新等功能，雖然官方文檔已經聲明了不再更新此組件，但是目前的版本基本滿足於我們的日常開發，所以還是可以使用的；
我們在組件中使用的時候是需要引入對應組才能進行使用的；
import { Scroller } from 'vux'
HTML視圖層代碼：
//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>
js數據邏輯層代碼：
// 上拉加載滑動的方法
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="加載成功";
}
//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)
}
},
到這里，我們的上拉加載功能就實現了，一般情況下上拉加載是和下拉刷新一起用的，vux都給我們提供了組件，由於項目需要暫時只用到了上拉加載，代碼看似很多，其實不是很復雜；