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

发布时间:2023-08-11 14:42:49 作者:已注销 阅读量:7911

  

  上拉刷新,下拉加载,分别点击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();

  }

  },

  )}

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

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

更多小程序开发案例,尽在:http://www.duochengxu.comkaifa.html 

***本网站图片,文字之类版权申明,因为网站可以由注册用户自行上传图片或文字,本网站无法鉴别所上传图片或文字的知识版权,如果侵犯,请及时通知我们,本网站将在第一时间及时删除。

我要评论

网友评论


评论时间:2024-03-17 05:27:02

ap网站快速开发平台 p制作团队下载量达百万级,APP用户规模超千万APP在线制作平台

回复
秒制作
Catfish(鲶鱼) Blog V 4.7.3