小程序端 带条件的分页

序言

因为一开始是打算学后端的，但是因为团队的原因后来去做前端了，只有在课余时间学习了SSM还有Springboot，也没有在团队项目中用上，前端也是要用什么，去学什么，没有什么太拿得出手的技术要讲（vue跟小程序开发的官方文档都找得到，没啥好讲的）。

这里就讲一下我是如何在小程序端的首页列表中如何使用分页。

技术概述

当小程序端需要请求的数据特别多，但是不要求一次性显示出来的时候，可以使用分页，在需要的时候再请求下一页内容。

分页本身没有难点，难点在于怎么正确的给分页传入正确的、合适的参数而得到正确的内容。

技术详述

流程图(思路)

过程代码

1. data绑定数据

   data: {
       searchInput: "",//搜索框内容
       tabIndex: 0,//标签页下标
       secTime: "时间",//二手-时间筛选
       secSort: "类别",//二手-类别筛选
       secDegree: "新旧程度",//二手-新旧筛选
       taskTime: "时间",//任务-时间筛选
       taskSort: "类别",//任务-类别筛选
       activityTime: "时间",//活动-时间筛选
       activitySort: "类别",//活动-类别筛选
       goodsPage: 1,//当前请求页
       taskPage: 1,
       activityPage: 1,
   }

2. 下拉刷新函数

   /**
      * 页面上拉触底事件的处理函数
      */
     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();//搜索
     },

3. 搜索时置页数为1

   /**
      * 搜索功能
      */
     search: function() {
       this.setData({
         goodsPage: 1,
         taskPage: 1,
         activityPage: 1
       })
       this.searchOne();//这个函数用于获取搜索条件及筛选条件并发送请求
     },

4. 带条件搜索函数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端的那种点击下一页，所以对于页码的设置需要格外小心，一个不注意，可能就会导致请求数据的混乱。

参考文献

无

标签：case,pageid,分页,程序,搜索,data,请求
来源： https://www.cnblogs.com/NingMengBlog/p/14939663.html