<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="上拉加载更多";
