小程序：实现翻页功能(解决数据过载)

效果

核心代码

①wxml设置翻页标签

<viewclass="pagination"wx:if="{{list.length>0}}”>

上一页

{{page}}

/

{{totalPage}}

下一页

②wxss设置翻页样式

/*分页*/

.pagination{

display:flex;

align-items:center;

justify-content:left;

/*margin-bottom:0;*/

/*border:1pxsolidblack;*/

}

.page-button{

height:30px;

line-height:30px;

padding:010px;

border:1pxsolidwhite;

border-radius:5px;

margin:3%;

cursor:pointer;

}

.page-info{

font-weight:bold;

}

③js设置翻页功能

a.设置data数据

page:1,//当前页数

pageSize:2,//每页展示的数据条数

totalPage:0,//总页数,

b.设置左右翻页功能

prevPage(){

if(this.data.page>1){

this.setData({

page:this.data.page-1,

selList:[],

})

this.getdata();

}

},

nextPage(){

if(this.data.page<this.data.totalPage){

this.setData({

page:this.data.page+1,

selList:[],

})

this.getdata();

}

},

c.传递当前页码和页面需要展示的数量去查询数据，并将返回的数据计算页数

getdata(){

wx.request({

url:app.globalData.position+’Repair/select_never_repaired’,

data:{

username:app.globalData.username,

like_info1:this.data.like_info1,

page:this.data.page,

pageSize:this.data.pageSize

},

header:{

“Content-Type”:”application/x-www-form-urlencoded”

},

method:’POST’,

dataType:’json’,

success:res=>{

console.log(res.data)

this.setData({

list:res.data.info,

count:res.data.count,

totalPage:Math.ceil(res.data.total/this.data.pageSize)

})

},

fail(res){

console.log(“查询失败”)

}

})

},

④后端查询数据，并限制查询条件（这里采用thinkphp）

//查询从未维修过的单据
public function select_never_repaired()
{
$username = input(‘post.username’);
$like_num = input(‘post.like_info1’, ”);
$page = input(‘post.page’, 1); // 获取当前页数，默认为第一页
$pageSize = input(‘post.pageSize’, 10); // 获取每页展示的数据条数，默认为10条
$start = ($page – 1) * $pageSize; // 计算查询的起始位置
//通过账户查询到对应id
$account_id = db::table(‘fa_account_info’)->where([‘username’ => $username])->value(‘id’);
//当前员工下以工单号模糊查询
$data[‘info’] = db::table(‘rep_info_base’)
->where([‘account_id’ => $account_id, ‘order_status’ => ”, ‘main_status’ => ‘已分配’, ‘if_arrange’ => ‘是’])
->where([‘order_number’ => [‘like’, ‘%’ . $like_num . ‘%’]])
->limit($start,$pageSize)
->select();
for ($i = 0; $i < count($data['info']); $i++) {
//创建时间
$data[‘info’][$i][‘creation_time’] = date(‘Y-m-d H:i:s’, $data[‘info’][$i][‘creation_time’]);
//期望完成时间
$data[‘info’][$i][‘expect_complete_time’] = date(‘Y-m-d H:i:s’, $data[‘info’][$i][‘expect_complete_time’]);
//分配时间
$data[‘info’][$i][‘distribute_time’] = date(‘Y-m-d H:i:s’, $data[‘info’][$i][‘distribute_time’]);
//排程时间
$data[‘info’][$i][‘arrange_time’] = date(‘Y-m-d H:i:s’, $data[‘info’][$i][‘arrange_time’]);
//维修状态设置为未维修
$data[‘info’][$i][‘order_status’] = ‘待维修’;
}
$data[‘total’] = db::table(‘rep_info_base’)
->where([‘account_id’ => $account_id, ‘order_status’ => ”, ‘main_status’ => ‘已分配’, ‘if_arrange’ => ‘是’])
->where([‘order_number’ => [‘like’, ‘%’ . $like_num . ‘%’]])
->count();
$data[‘count’] = $data[‘total’];
echo json_encode($data);
}

完整代码

wxml

<image src="{{search}}">{{count}}条数据<!-- {{iconStatu" />{list==''}}">暂无数据<view class="item_all_position" wx:for="{{list}}" wx:key="index" data-id='{{item.id}}'><icon wx:if="{{iconStatu}}" bindtap="toggleSel" type="success" size="30" color="{{item.selStatu?'#80c2e2':'#999'}}" data-id='{{item.id}}' /><view class="position" bindtap="allocating_detial" data-id='{{item.id}}'>{{item.fault_type}}{{item.product_name}}{{item.order_number}}故障描述：{{item.fault_description}}期望时间：{{item.expect_complete_time}}故障地点：{{item.report_address}}维修状态：{{item.order_status}}<view class="pagination"wx:if="{{list.length>0}}">上一页{{ page }}/{{ totalPage }}下一页

wxss

/* flex类名 *//* 定义 */.flex-def {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}/* 侧轴居中 */.flex-cCenter {-webkit-box-align: center;-moz-align-items: center;-webkit-align-items: center;align-items: center;}.flex-wrap {flex-wrap: wrap;}/* 主体信息布局 */.main {width: 100%;display: flex;align-items: center;justify-content: center;}.main_left {width: 60%;}.main_left text {margin-left: 7%;color: #777A7C;}.main_right {width: 40%;text-align: right;padding-right: 5%;color: #777A7C;}/* 列表布局 */.item_all_position {width: 100%;display: flex;align-items: center;justify-content: center;}.item_all {box-sizing: border-box;width: 95%;border-radius: 10rpx;padding: 0 2% 2% 2%;margin-top: 5%;background-color: #FFFFFF;border-bottom: 2px solid rgba(202, 202, 202, 0.856);/* border: 1px solid black; */}/* 第一行 */.vv_1 {font-size: 18px;background-color: #ffffff;}/* 第一行文字 */.vv_1_text {display: flex;width: 80%;align-items: center;padding-left: 3%;}.vv_1_text1 {font-size: 110%;color: #76b5d4;font-weight: bold;}.vv_1_text2 {color: #7e7e7e;font-size: 90%;margin-left: 5%;}/* 第一行类型 */.type {background-color: #65b5dd;padding: 1% 5%;font-size: medium;text-align: center;margin-bottom: 2%;float: right;}.vv_3 {padding: 3% 0 3% 3%;/* margin-left: 3%; */background-color: #ffffff;display: flex;color: gray;font-size: 95%;}.vv_4 {word-break: break-all;padding: 3% 0 3% 3%;/* margin-left: 3%; */color: gray;/* border:1px solid black; */}.vv_5{padding: 0 0 3% 3%;color: rgb(192, 82, 82);}.vv_5 text {color: rgb(97, 97, 97);}.vv_4 text {color: rgb(97, 97, 97);}.vv_3 text {color: rgb(97, 97, 97);}.footer {position: fixed;display: flex;bottom: 0;width: 100%;height: 80prx;line-height: 80rpx;text-align: center;}.footer1 {background-color: #80c2e2;width: 50%;height: 80prx;line-height: 80rpx;text-align: center;border-right: 2px solid rgb(219, 219, 219);}.footer2 {background-color: #80c2e2;width: 50%;height: 80prx;line-height: 80rpx;text-align: center;}.position {width: 90%;}/* 搜索框 */.search {display: flex;align-items: center;justify-content: center;padding: 5% 0 5% 0;}.search .search_in {display: flex;align-items: center;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;height: 70rpx;width: 95%;border-radius: 5px;background-color: white;}.search_in image {height: 45rpx;width: 50rpx;margin-right: 10px;}.search input {width: 100%;}/* 暂无数据样式 */.nodata {display: flex;align-items: center;justify-content: center;color: gray;font-size: 90%;margin-top: 50%;}/* 分页 */.pagination {display: flex;align-items: center;justify-content: left;/* margin-bottom: 0; *//* border: 1px solid black; */}.page-button {height: 30px;line-height: 30px;padding: 0 10px;border: 1px solid white;border-radius: 5px;margin: 3%;cursor: pointer;}.page-info {font-weight: bold;}

js

const app = getApp()let handname = ''Page({data: {search: app.globalData.icon + 'index/search.png',page: 1, // 当前页数pageSize: 2, // 每页展示的数据条数totalPage: 0, //总页数,like_info1: '', //待排期的模糊查询条件},//模糊查询待排程信息search_wait_list(event) {this.page = 1;this.data.like_info1 = event.detail.value;this.getdata();},//进入已分配工单详情页allocating_detial: function (e) {// console.log(e.currentTarget.dataset.id) //待分配数据wx.navigateTo({url: '/pages/mine/detail/detail?id=' + e.currentTarget.dataset.id,})},getdata(){wx.request({url: app.globalData.position + 'Repair/select_never_repaired',data: {username:app.globalData.username,like_info1: this.data.like_info1,page: this.data.page,pageSize: this.data.pageSize},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {console.log(res.data)this.setData({list: res.data.info,count: res.data.count,totalPage: Math.ceil(res.data.total / this.data.pageSize)})},fail(res) {console.log("查询失败")}})},prevPage() {if (this.data.page > 1) {this.setData({page: this.data.page - 1,selList: [],})this.getdata();}},nextPage() {if (this.data.page < this.data.totalPage) {this.setData({page: this.data.page + 1,selList: [],})this.getdata();}},//进入页面显示onLoad: async function (options) {this.getdata();},//分享onShareAppMessage:function(){//清空登录信息wx.removeStorageSync('username');//返回登录页面return {title: '维修系统',path: '/pages/login/main/main',imageUrl: '/images/share/title.png',}},})

thinkphp

//查询从未维修过的单据public function select_never_repaired(){$username = input('post.username');$like_num = input('post.like_info1', '');$page = input('post.page', 1); // 获取当前页数，默认为第一页$pageSize = input('post.pageSize', 10); // 获取每页展示的数据条数，默认为10条$start = ($page - 1) * $pageSize; // 计算查询的起始位置//通过账户查询到对应id$account_id = db::table('fa_account_info')->where(['username' => $username])->value('id');//当前员工下以工单号模糊查询$data['info'] = db::table('rep_info_base')->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])->where(['order_number' => ['like', '%' . $like_num . '%']])->limit($start,$pageSize)->select();for ($i = 0; $i where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])->where(['order_number' => ['like', '%' . $like_num . '%']])->count();$data['count'] = $data['total'];echo json_encode($data);}