小程序滚动到底部触发加载新数据的技巧

在手机端加载商品或者评论时经常会遇到页面滚动到底部加载更多数据的需求
我在开发过程中也经常遇到，每次都感觉很头疼。特别是在订单那种有tab切换，混杂着触底刷新，tab切换后又要重置参数，很多时候代码会写一大堆，过了几天TMD自己写的都看不下去了。
最关键的是这种需求在商城类的需求很多，首页有评论有购物车也有，复制粘贴固然可以解决这些问题，但是代码整洁和共用提纯上乱的一塌糊涂。
于是我尝试用一种模式去改变这种现状。
用一种类似于工厂设计的模式来做，一开始传入请求数据的函数request、初始的list，请求的参数pages，是否刷新fresh、以及请求结果的回调callBack，然后在onReachBottom每次触底都请求一次getData(),当你需要改变pages，然后重置getData(true),即可重置请求结果
下面的代码我最近在uni-app使用的一种

// 缓存请求的对象  
let scrollPages={}  
// 滚动获取数据，fresh：刷新，key：请求时唯一标识，pages参数,n:初始从第几页开始，requsetFun请求方法，setList:赋值函数，list赋值对象  
let page='pageNum'// 页面切换的key  
let size='pageSize'//  每页请求个数key  
let startNumber=1 // 开始页码  
let defaultPar={[size]: 10,isAll: false}  
// 滚动到底部获取数据 list初始条数 request请求函数  回调callBack，是必填，n开始页码，getCode在请求完的结果里取值的key  
export const scrollGetList =(list,{fresh = false,getCode,key,n,pages={},request},callBack) => {  
  let inPages={ ...defaultPar,...pages}  
  console.log('inPages',inPages)  
  // 没有key会用请求的函数做名字  
  key=key||request.name  
  // fresh 重置会重置之前所有的请求参数的记录  
  if (fresh) scrollPages={}  
  // 没有记录或者重置参数  
  if (!scrollPages[key]||fresh) {  
    inPages[page]=n||startNumber  
    scrollPages[key]={key, request,pages:inPages,}  
  }  
  if (scrollPages[key].pages.isAll && !fresh) {  
    toast(`已加载全部,共${list.length}条`)  
    return  
  };  
  uni.showLoading({  
    title: '加载中',  
    mask: true,  
  });  
  let pg=  scrollPages[key].pages  
  delete pg.isAll  
  scrollPages[key].request(pg).then((data) => {  
    uni.hideLoading();  
    let midList=getCode?data[getCode]:data  
    // 每次请求完+1  
    let pages = pg[page] + 1;  
    scrollPages[key].pages={...scrollPages[key].pages,[page]:pages, isAll: midList.length<inPages[size]}  
    list=fresh ? midList : [...list, ...midList];  
    callBack(list)  
  }).catch(()=>{  
    uni.hideLoading();  
  })  
};

在vue文件里

data:{  
 return {  
      list:[],  
      pages:{}  
   }  
},  
methods:{  
   // 获取数据  
    getData(fresh){  
      scrollGetList(this.list, {  
        fresh,  
       pages:{  
        ...this.pages  
      },  
        request:getListFun//请求的函数  
      },(list)=>{  
        this.list=list  
      })  
    },  
},  
// 每次进入页面刷新  
onShow() {  
    this.getData(true)  
  },  
// 触底刷新  
 onReachBottom() {  
    this.getData()  
  },  
// 下拉刷新  
onPullDownRefresh() {  
 this.getData(true)  
}