微信小程序实现分页功能

本文实例为大家分享了微信小程序实现分页的具体代码，供大家参考，具体内容如下今天被提了个需求，需要小程序上实现分页，搜索能力不行，没找到demo，自己想了一下逻辑然后，就自己写了，不知道有没有相同的，如...

本文实例为大家分享了微信小程序实现分页的具体代码，供大家参考，具体内容如下

今天被提了个需求，需要小程序上实现分页，搜索能力不行，没找到demo，自己想了一下逻辑然后，就自己写了，不知道有没有相同的，如果比我的思路好分享一下，这个是我刚刚写出来的，后期可以进行修改，拿去用吧，写完后感觉挺简单的没有特别的思路完全可以优化，上代码

小程序端

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=='dvyVnBmR审核失败'}}" style='color:rgb(255,0,0)'>{{item.sta}}</text>
   </view>
  </view>
 </view>
</view>
<view class="nav" &gwww.cppcns.comt;
  <!-- <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=android"{{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>

js`

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
     })
    }
   }
  })
 }

wxss

.nav{
 background-color: #fff;
 padding: 26rpx 0;
 color: #7b7b7b;
}
.nav>text{
 width: 16.4%;
 text-align: center;
 display: inline-block;
}
.outer_container{
 width:80%;
 margin:0 auto;
 height:200rpx;
 background-color: white;
 padding-left:40rpx;
 phppadding-right: 40rpx;
 border-bottom:1rpx solid rgb(214, 214, 214);
 color: rgb(79, 193, 229);
 font-size: 24rpx;
}
.one{
 height:100rpx;
 line-height: 100rpx;
 border-bottom:1rpx solid rgb(218,218,218);
}

.two{
 height:100rpx;
 line-height: 100rpx;
 color:rgb(102, 102, 102)
}

.right{
 float:right;
 font-size: 46rpx;
 line-height: 50rpx;
 color:rgb(218, 218, 218);
}

.right_2{
 float:right;
 line-height: 100rpx;
 color:rgb(102, 102, 102);
}


.divLine{
background: #D4DADD;
width: 100%;
height: 4rpx;
}
.right{
 width:25rpx;
 height:25rpx;
 margin-top:20rpx;
 margin-right:20rpx;
 position:relative;
}

-后台的查询，我是php，你可以Java或者其他，毕竟多掌握几门语言没有坏处
-初次渲染的后台

/**数量查询*/
$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;

界面展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。