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

效果

核心代码

①wxml设置翻页标签

0}}">

      上一页

      {{ page }}

      /

      {{ totalPage }}

      下一页

②wxss设置翻页样式

/* 分页 */

.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设置翻页功能

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

  
  
    
    
      
        
          
          
          
        
      
    
    
    
      {{count}}条数据
      
        
      
    
    暂无数据
    
      
        
        
          
            
            
              {{item.fault_type}}
            
            
            
              {{item.product_name}}
              {{item.order_number}}
            
          
          故障描述：{{item.fault_description}}
          期望时间：{{item.expect_complete_time}}
          故障地点：{{item.report_address}}
          维修状态：{{item.order_status}}
        
      
    
    
      上一页
      {{ 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 < 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);
    }