微信小程序實現分頁功能
本文實例為大傢分享瞭微信小程序實現分頁的具體代碼，供大傢參考，具體內容如下
今天被提瞭個需求，需要小程序上實現分頁，搜索能力不行，沒找到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;
界面展示
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。