微信小程序实现分页功能

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

今天被提了个需求,需要小程序上实现分页,搜索能力不行,没找到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=='审核失败'}}" 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>

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;   padding-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;

界面展示

推荐阅读