因为一开始是打算学后端的,但是因为团队的原因后来去做前端了,只有在课余时间学习了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端的那种点击下一页,所以对于页码的设置需要格外小心,一个不注意,可能就会导致请求数据的混乱。
无