金狮贵宾会

登录
免费开通

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

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

  上拉刷新,,,下拉加载,,,划分点击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内里的。 。。 。;;蛘呤侵苯觛etUserMessage().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步上线。 。。 。。通过拖拽、拼接 ??????榻峁剐〕绦蛏坛且趁,,,所看即所得,,,只需要美工就能做出细腻商城。 。。 。。

有关进一步相识小程序开发案例,,,请前往:/miniprogramdev/ 

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,若有知识产权人并不肯意我们使用,,,若是有侵权请连忙联系。 。。 。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,仅系客观性形貌,,,如您需要相识该类商品/服务详细的资讯,,,请您直接与该类商品/服务的提供者联系。 。。 。。


KESION 金狮贵宾会软件

KESION 金狮贵宾会软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。 。。 。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。 。。 。。

KESION 一直通过手艺立异,,,提供产品和服务,,,助力企业向数字化转型,,,通过科技驱动商业刷新,,,让商业变得更智慧!



▼点击进入金狮贵宾会官网相识更多



热门标签
SaaS
上/下篇
换一换相关推荐
精选内容
热门精选
金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫 金狮贵宾会·宾至如归-尊贵显赫
【网站地图】
小程序之上拉刷新下拉加载的实现 - KESION 金狮贵宾会