微信小程序实现分页功能

网友投稿 696 2023-11-10

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

微信小程序实现分页功能

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

小程序端

wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 有数据的话循环第一个就欧剋啦 -->
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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

-后台的查询

，我是php，你可以java或者其他，毕竟多掌握几门语言没有坏处

-初次渲染的后台
?
1
2
3
4
5
6
7
8
9
10
11
12
/**数量查询*/
$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;

-每次点击页数查询的后台

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//之后查询的页面
$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;

界面展示

您可能感兴趣的文章:微信小程序分页加载的实例代码微信小程序云开发实现数据添加、查询和分页微信小程序模板之分页滑动栏微信小程序实现分页加载效果微信小程序实现下拉刷新和上拉分页效果的方法详解微信小程序之搜索分页功能的实现代码微信小程序实现分页查询详解微信小程序实现表格前后台分页微信小程序实现列表分页功能微信小程序云开发实现分页刷新获取数据

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 方法 数据
上一篇:小程序页面之间数据传递的4种方法总结
下一篇:微信小程序实现2048小游戏的详细过程
相关文章

 发表评论

暂时没有评论，来抢沙发吧~