微信小程序分页功能实现

先在data里定义当前页，每页条数，全部总条数在wxml页面遍历cartListDatas

  data: {page: 0, //当前页pages: 10, //每页条数total: 0, //q全部总条数cartListDatas: [],},

请求接口数据

 // 获取数据getCartList(isMerge) {var deptId = wx.getStorageSync('deptId')var pages = this.data.pagesvar page = this.data.pageconfig.reqestApi(app.globalData.api + `/cart/getCars?deptId=${deptId}&page=${page}&size=${pages}`).then(res => {console.log("cart=============", res)if (res.data.code == 200) {let cartListDatas = this.data.cartListDatasif (!isMerge) {//不合并,shop需要初始化cartListDatas = [];}cartListDatas = cartListDatas.concat(res.data.data.content) || [];this.setData({cartListDatas,total: res.data.data.totalElements,})}})},

设置分页

  //  分页setPage() {const {page,pages,total} = this.data;// const totalPages = getTotalPages(total, pages);const remainder = Number(total) % Number(pages);const value = Math.floor(total / pages);const totalPages = remainder == 0 ? value - 1 : Number(value);// return totalPagesconsole.log("totalPages======", totalPages);if (totalPages > 0) {this.data.page += 1}if (page >= totalPages || this.isLoading) {//控制触底是否加载需要两个条件,满足一下两个条件,都不能调用请求函数// 1.当前页是最后一页,// 2. 正在加载中return}//分页加载需要传递isMerge=true参数,表示需要合并到原来的数组上this.getCartList(true)},

页面上拉事件处理函数

  /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {this.setPage()},

微信小程序分页功能实现相关推荐

微信小程序分页功能（上拉触底事件）
js核心代码 Page({data: {// 前台显示listshowlist: [],// 当前页pageNumber: 1,// 总页数totalPage: 1,},onLoad: functio ...
微信小程序周报（第十三期）-极乐商店(store.dreawer.com)出品
重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句 ...
八月微信小程序导航：官方文档+精品教程+demo集合（8月25...
2019独角兽企业重金招聘Python工程师标准>>> 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=147643467846 ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序修改整体背景颜色
微信小程序在最外层设置view 的高度为100% ,然后在设置backgroud 的颜色值发现没有效果这个处理方法就是在xx.wxml 中设置 page{ background:#e5e5e5: ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序scroll-view的使用
这边博客主要是对微信小程序文档的的使用心得官网地址 demo效果一些属性 scroll-top 和属性,设置竖向滚动条的位置,就是第一次进来的时候,还没有滑动的时候view的位置假如不设置默认在 ...
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释, ...

微信小程序分页功能实现

微信小程序分页功能实现相关推荐

最新文章

热门文章