当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序开发:分页功能的代码实现

微信小程序开发:分页功能的代码实现

2018-06-14 11:35 来源: 霸界科技

摘要:微信小程序开发怎样进行分页功能的代码实现...

期权保本理财
  微信小程序开发怎样进行分页功能的代码实现:
 
微信小程序开发:分页功能的代码实现
 
  js核心代码
 
  Page({
 
  data: { // 前台显示list showlist: [], // 当前页 pageNumber: 1, // 总页数 totalPage: 1,
 
  },
 
  : (options) { var self = this; // 请求后台  // 获取第一页的list及总页数 wx.request({
 
  url: '',
 
  data: {
 
  },
 
  success: (res) { self.setData({
 
  showlist: res.data.list,
 
  totalPage: res.data.totalPage,
 
  })
 
  },
 
  fail: (res) { }
 
  })
 
  }, /**
 
  * 页面上拉触底事件的处理函数
 
  */ onReachBottom: () { var self = this; // 当前页+1 var pageNumber = self.data.pageNumber + 1; self.setData({
 
  pageNumber: pageNumber,
 
  }) if (pageNumber <= self.data.totalPage) {
 
  wx.showLoading({
 
  title: '加载中',
 
  }) // 请求后台,获取下一页的数据。 wx.request({
 
  url: '',
 
  data: {
 
  pageNumber: pageNumber,
 
  },
 
  success: (res) { wx.hideLoading() // 将新获取的数据 res.data.list,到前台显示的showlist中即可。 self.setData({
 
  showlist: self.data.showlist.(res.data.list)
 
  })
 
  },
 
  fail: (res) { wx.hideLoading()
 
  }
 
  })
 
  }
 
  }
 
  })
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088