小程序端分页
2021/6/27 1:44:05
本文主要是介绍小程序端分页,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小程序端 带条件的分页
序言
因为一开始是打算学后端的,但是因为团队的原因后来去做前端了,只有在课余时间学习了SSM还有Springboot,也没有在团队项目中用上,前端也是要用什么,去学什么,没有什么太拿得出手的技术要讲(vue跟小程序开发的官方文档都找得到,没啥好讲的)。
这里就讲一下我是如何在小程序端的首页列表中如何使用分页。
技术概述
当小程序端需要请求的数据特别多,但是不要求一次性显示出来的时候,可以使用分页,在需要的时候再请求下一页内容。
分页本身没有难点,难点在于怎么正确的给分页传入正确的、合适的参数而得到正确的内容。
技术详述
流程图(思路)
过程代码
data绑定数据
data: { searchInput: "",//搜索框内容 tabIndex: 0,//标签页下标 secTime: "时间",//二手-时间筛选 secSort: "类别",//二手-类别筛选 secDegree: "新旧程度",//二手-新旧筛选 taskTime: "时间",//任务-时间筛选 taskSort: "类别",//任务-类别筛选 activityTime: "时间",//活动-时间筛选 activitySort: "类别",//活动-类别筛选 goodsPage: 1,//当前请求页 taskPage: 1, activityPage: 1, }
下拉刷新函数
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { this.searchNext();//搜索下一页 }, /** * 下拉刷新 */ searchNext: function() { let pageid; switch(this.data.tabIndex) { case 0://二手物品 pageid = this.data.goodsPage; pageid++; this.setData({ goodsPage: pageid }) break; case 1://任务 case 2://活动 //当前是哪个部分下拉到最底部,就哪个pageid+1 this.searchOne();//搜索 },
搜索时置页数为1
/** * 搜索功能 */ search: function() { this.setData({ goodsPage: 1, taskPage: 1, activityPage: 1 }) this.searchOne();//这个函数用于获取搜索条件及筛选条件并发送请求 },
带条件搜索函数searchOne()与分页请求
/** * 搜索函数 */ searchOne: function() { var keyWord = this.data.searchInput; switch(this.data.tabIndex) { case 0: //从data中获取以下四个参数 //…… this.search_Sec(days, secSortId, condition, keyWord, this.data.goodsPage); break; case 1: case 2: } }, /** * 搜索二手物品 */ search_Sec: function(days, categoryId, condition, keyWord, pageid) { let that=this; wx.request({ url: 'xxx', header: { 'Content-Type': 'application/x-www-form-urlencoded', 'Cookie': wx.getStorageSync('sessionid'), 'token': app.globalData.token }, data: { days: days, categoryId: categoryId, condition: condition, keyWord: keyWord, pageid: pageid //当前需要搜索的页号 }, method: "POST", success(res){ console.log(res); if(res.data.code == 200){ var list = res.data.data;//json中的data数组 console.log(list); if(pageid != 1) { list = that.data.goodsList.concat(list); }/*如果pageid不为1,就把新的数组拼接到goodsList 否则直接把请求得到的数组赋值给goodsList */ that.setData({ goodsList: list }) } } }) },
问题与解决方法
问题1:下拉刷新时,如果是先搜索,再下拉刷新,那下拉时新请求的数据是否附带搜索条件?
解决方法:利用data变量双向绑定搜索条件,每次下拉刷新的时候,实际上触发的是搜索功能,附带条件搜索,只是请求的时候,直接搜索时把currentpage置为1,而下拉刷新时把currentpage+1
问题2:页码要在何时归1,何时+1,何时不变?
解决方法:在data初始值中全赋为1,在点击搜索时currentpage归1再搜索,下拉刷新时currentpage+1后再请求,另外的,由于我在onShow()函数中重新获取列表信息(为了修改能及时反馈到列表),在重新请求之前,需要把所有currentpage归1。
总结
小程序端的分页其实不难,但是要思路清晰,可以参照web端分页的思路进行设计,但是不同的是小程序的下一页是通过下拉触底函数触发的,而不是通过web端的那种点击下一页,所以对于页码的设置需要格外小心,一个不注意,可能就会导致请求数据的混乱。
参考文献
无
这篇关于小程序端分页的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04微信小程序如何实现点击图片查看大图功能-icode9专业技术文章分享
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南