微信小程序分页查询

实现目标:

  1. 根据搜索条件后台查询。
  2. 实现上下翻页功能,以及显示当前页码。

实现方式:

  • 按照PC端web开发的模式,实现分页需要给后台传offset和limit两个参数,其中offset是指针起始位置,limit是偏移量。
  • 小程序也是如此,不同的是传参数时,由于不能通过dom节点获取input中的value值,需要在全局变量中再设置一个参数a,当点击查询按钮时把input中的value更新到参数a,再传到后台。翻页的时候无论input是什么值都不去更新参数a。
  • 为了计算当前页、以及最后一页的页码,后台还需要传集合的size过来。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的微信小程序分页实现代码示例: 1. 定义全局变量 在page的data中定义pageNum和pageSize两个变量用于分页: ``` data: { list: [], // 数据列表 pageNum: 1, // 当前页码 pageSize: 10, // 每页显示数量 hasMore: true // 是否还有更多数据 } ``` 2. 加载第一页数据 在onLoad事件中调用loadData方法加载第一页数据: ``` onLoad: function () { this.loadData(); } ``` loadData方法中设置请求参数并调用网络请求接口拉取数据,成功后将数据保存到list数组中: ``` loadData: function () { wx.showLoading({ title: '加载中...', }) var that = this; wx.request({ url: 'https://xxx.xxx.com/api/list', data: { pageNum: that.data.pageNum, pageSize: that.data.pageSize }, success: function (res) { if (res.data.code == 0) { var list = res.data.data.list; that.setData({ list: that.data.list.concat(list), hasMore: list.length >= that.data.pageSize, pageNum: that.data.pageNum + 1 }) } else { wx.showToast({ title: res.data.message, icon: 'none' }) } }, fail: function () { wx.showToast({ title: '网络异常', icon: 'none' }) }, complete: function () { wx.hideLoading(); } }) } ``` 3. 监听页面滚动事件 在页面的onPageScroll事件中监听页面滚动事件,当页面滚动到底部时加载下一页数据: ``` onPageScroll: function (e) { if (this.data.hasMore && e.scrollTop + e.windowHeight + 20 >= e.scrollHeight) { this.loadData(); } } ``` 4. 清空数据重新加载 如果需要重新加载数据,可以在页面中添加一个按钮,点击按钮时清空list数组并将pageNum重置为1,然后调用loadData方法加载第一页数据: ``` onReload: function () { this.setData({ list: [], pageNum: 1, hasMore: true }) this.loadData(); } ``` 以上是一个简单的微信小程序分页实现代码示例,需要注意的是,实际开发中需要根据具体需求进行适当调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值