小程序简单实现分页功能

index.wxml

<!-- 有数据的话循环第一个就欧剋啦 -->
<view wx:for="{{allworkflow}}" wx:key="{{item}}" style=margin-top:20rpx;>
  <view class=outer_container bindtap=dd_detail data-id={{item.id}}>
    <view class=one>订单类型：{{item.type}}
      <view class=right>></view>
    </view>
    <view class=two>
      订单日期：{{item.yvtime}}
      <view class=right_2>订单状态：
        <text bindtap=dd_status data-id={{item.id}} wx:if="{{item.sta==待审核 || item.sta==审核通过}}" style=color: rgb(79, 193, 229);>{{item.sta}}</text>
        <text bindtap=dd_status wx:else="{{item.sta==审核失败}}" style=color:rgb(255,0,0)>{{item.sta}}</text>
      </view>
    </view>
  </view>
</view>
<view class="nav">
  <!-- <text  wx:if="{{(page1-step)>0}}" bindtap=pu style=color: rgb(79, 193, 229);>
上一页
</text> -->
  <text bindtap=pu style=color: rgb(79, 193, 229);>
    上一页
  </text>
  <text bindtap=dd_status wx:if="{{page1<=allpage}}" data-id={{page1}} style=color: rgb(79, 193, 229);>
    第{{page1}}页
  </text>
  <text bindtap=dd_status wx:if="{{page2<=allpage}}" data-id={{page2}} style=color: rgb(79, 193, 229);>
    第{{page2}}页
  </text>
  <text bindtap=dd_status wx:if="{{page3<=allpage}}" data-id={{page3}} style=color: rgb(79, 193, 229);>
    第{{page3}}页
  </text>
  <text bindtap=dd_status wx:if="{{page4<=allpage}}" data-id={{page4}} style=color: rgb(79, 193, 229);>
    第{{page4}}页
  </text>
  <!-- <text wx:if="{{page4<allpage}}" bindtap=pd data-id={{item.id}} style=color: rgb(79, 193, 229);>
下一页
</text> -->
  <text bindtap=pd data-id={{item.id}} style=color: rgb(79, 193, 229);>
    下一页
  </text>
</view>
<view style="text-align:center">
  <text data-id={{item.id}} style=color: rgb(79, 193, 229);>
    共{{allpage}}页 当前为第{{nowpage}}页
  </text>
</view>

index.js

Page({
  data: {
    allpage: 16, //总页数
    nowpage: 1, //当前页数
    page1: 1, //第一页
    page2: 2, //第二页
    page3: 3, //‘‘
    page4: 4,
    step: 4, //步长
  },
  /**主要函数*/
  //初始化渲染数据
  onLoad: function (options) {
    var that = this
    wx.request({
      url: "你的网址",
      data: {
        userphone: 你的参数,
      },
      success: function (res) {
        console.log(res);
        if (res.data.code == 0) {
          that.setData({
            allworkflow: res.data.data, //初始数据列表
            allpage: res.data.count //数据总页数
          })
        } else {
          wx.showToast({
            title: "暂无待处理工作流！",
            icon: none,
            duration: 20000
          })
        }
      }
    })
  },
  /**
   * 上一页
   */
  pu: function () {
    var now = this.data.page1 - this.data.step;
    if (now > 0) {
      this.setData({
        page1: this.data.page1 - this.data.step,
        page2: this.data.page2 - this.data.step,
        page3: this.data.page3 - this.data.step,
        page4: this.data.page4 - this.data.step,
      });
    } else {
      wx.showToast({
        title: 已为第一页,
        icon: none,
        duration: 1000
      })
    }
  },
  /**
   * 下一页
   */
  pd: function () {
    if (this.data.page4 < this.data.allpage) {
      this.setData({
        page1: this.data.page1 + this.data.step,
        page2: this.data.page2 + this.data.step,
        page3: this.data.page3 + this.data.step,
        page4: this.data.page4 + this.data.step,
      });
    } else {
      wx.showToast({
        title: 已为最后一页,
        icon: none,
        duration: 1000
      })
    }
  },
  /**
   * 点击后页面渲染，重新查询数据页面重新渲染
   */
  dd_status: function (e) {
    this.setData({
      nowpage: e.currentTarget.dataset.id,
    });
    var that = this
    wx.request({
      url: "你的地址",
      data: {
        userphone: 你的查询参数,
        page: e.currentTarget.dataset.id //当前页数的参
      },
      success: function (res) {
        if (res.data.code == 0) {
          that.setData({
            allworkflow: res.data.data,
          })
        } else {
          wx.showToast({
            title: "没有数据的提示！",
            icon: none,
            duration: 20000
          })
        }
      }
    })
  }
})

初次渲染的PHP后台：

/**数量查询*/
$querysum = "select count(id) as sums from yv_order where user_bankid=$user_bankid order by id desc";
/**数据查询*/
$query2 = "select yvtype,yvtime,sta,id from yv_order where user_bankid=$user_bankid order by id desc limit 4";
$data=array(
code=>0,
msg=>ok,
data=>$allorder,
count=>ceil($countsum/4),
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
exit;

每次点击页数查询的后台

//之后查询的页面
$userphone=$_GET[userphone];//你许哟啊查询条件的参数
$page=$_GET[page];//页数
//我的分页是4条一页，你自己按照你自己的来我只提供思路
if($pagel>0){
$query2 = "select yvtype,yvtime,sta,id from yv_order where user_bankid=$user_bankid order by id desc limit $pagel,4";
}else{
$query2 = "select yvtype,yvtime,sta,id from yv_order where user_bankid=$user_bankid order by id desc limit 4";
}
//对不起我只能为你提供片段
$data=array(
code=>0,
msg=>ok,
data=>$allorder,
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
exit;