小程序之上拉刷新下拉加载的实现

　　

　　上拉刷新，下拉加载，分别点击tab都还能够请求服务器。我想的最好的方法是把日期和月份这2个抽离出来做成一个方法，然后上拉刷新，下拉加载，点击tab分别调用日期和月份方法即可。我尝试百度/google，见到最多的链式写法，以获取用户数据举例：

　　//这里的操作都是举例说明。

　　wxLogin()

　　.then(=>res{

　　console.log(res.code)

　　return wxRequest.getUserOpenId(url, params)//请求获取用户ID

　　})

　　.then(=>res{

　　console.log(res.openId)

　　return wxRequest.getUserPhone());//请求获取用户手机

　　})

　　.catch()

　　在index.js页面 ; getUserOpenId()和getUserPhone()都是封装在另外一个js里面的。或者是直接getUserMessage().then(res=>).catch();这样直接获取用户数据了。

　　wxRequest.getUserMessage()

　　.then(=>res{

　　console.log(res.code);

　　})

　　.catch()

　　当然我这样举例还是不能说明存在什么问题，那么如果我要像上面图那样获取日期数据，月份数据怎么办呢?难道按照第一个那样写，上拉加载那里写一堆，下拉刷新那里一堆，切换tab也写一堆重复的代码?还是说我管你是上拉刷新，还是下拉加载好，我直接通过一个接口在一起获取数据?所以我通过百度/google到他们写的还不够完善(不是写的不好哈)

　　我的写法：

　　//我只是抽取我部分代码来展示

　　Page({

　　data:{

　　},

　　onLoad: function () {//生命周期

　　this.readUserMesage();

　　},

　　readUserMesage(): function () {//获取用户信息，并获取按日期的数据

　　this.showLoading();

　　let parameters = 'user?ptId=aaaaaaaaaaaaaa';

　　api.getRequest({

　　parameters: parameters,

　　}).then(res => {

　　return this.readDayData(); //获取日期信息

　　}).catch(error => {

　　this.hideLoading();

　　});

　　},

　　readMonthData() {//把月份单独抽取出来

　　var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';

　　var parameters = { parameters: url }

　　return api.getRequest(parameters)//我这里是封装请求服务器的，注意我加了return

　　.then(res => {

　　//这里就可以获取到返回的res的集合数据

　　}).catch(error => {

　　console.log(JSON.stringify(error));

　　this.hideLoading();

　　});

　　},

　　readDayData() {//把日期单独抽取出来

　　var url = 'dailypay?xxxxx=aaaa&yyy=bbbbbb';

　　var parameters = { parameters: url }

　　return api.getRequest(parameters)//我这里是封装请求服务器的，注意我加了return

　　.then(res => {

　　//这里就可以获取到返回的res的集合数据

　　}).catch(error => {

　　this.hideLoading();

　　});

　　},

　　onPullDownRefresh() {//下拉刷新

　　if (this.data.currentIndex == 0) {//如果当前是在日期

　　this.readDayData();

　　} else {//如果当前是在月份

　　this.readMonthData();

　　}

　　},

　　onReachBottom() {//上拉加载

　　if (this.data.currentIndex == 0) {

　　this.readDayData();

　　} else {

　　this.readMonthData();

　　}

　　},

　　)}

　　好了，我的方法介绍完成了。这样做就可以减少代码量了。
 

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。