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

    效果

    核心代码

    ①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

    1.   
    2.   <view style="margin-bottom:5%">
    3.     
    4.     <view class="top">
    5.       <view class="search">
    6.         <view class="search_in">
    7.           
    8.           <image src="{{search}}">image>
    9.           <input type="text" placeholder="请输入工单号" placeholder-style="color:#CCCCCC" bindconfirm="search_wait_list" />
    10.         view>
    11.       view>
    12.     view>
    13.     
    14.     <view class="main">
    15.       <view class="main_left"><text>{{count}}条数据text>view>
    16.       <view class="main_right">
    17.         
    18.       view>
    19.     view>
    20.     <view class="nodata" wx:if="{{list==''}}">暂无数据view>
    21.     <view class="item_all_position" wx:for="{{list}}" wx:key="index" data-id='{{item.id}}'>
    22.       <view class=" flex-def flex-cCenter flex-zBetween item_all">
    23.         <icon wx:if="{{iconStatu}}" bindtap="toggleSel" type="success" size="30" color="{{item.selStatu?'#80c2e2':'#999'}}" data-id='{{item.id}}' />
    24.         <view class="position" bindtap="allocating_detial" data-id='{{item.id}}'>
    25.           <view class="vv_1">
    26.             
    27.             <view class="type">
    28.               <view>{{item.fault_type}}view>
    29.             view>
    30.             
    31.             <view class="vv_1_text">
    32.               <view class="vv_1_text1">{{item.product_name}}view>
    33.               <view class="vv_1_text2">{{item.order_number}}view>
    34.             view>
    35.           view>
    36.           <view class="vv_4"><text>故障描述：text>{{item.fault_description}}view>
    37.           <text class="vv_4" space="ensp"><text>期望时间：text>{{item.expect_complete_time}}text>
    38.           <text class="vv_3" space="ensp"><text>故障地点：text>{{item.report_address}}text>
    39.           <view class="vv_5"><text>维修状态：text>{{item.order_status}}view>
    40.         view>
    41.       view>
    42.     view>
    43.     <view class="pagination"  wx:if="{{list.length>0}}">
    44.       <view class="page-button" bindtap="prevPage">上一页view>
    45.       <view class="page-info">{{ page }}view>
    46.       <view class="page-info">/view>
    47.       <view class="page-info">{{ totalPage }}view>
    48.       <view class="page-button" bindtap="nextPage">下一页view>
    49.     view>
    50.   view>

     wxss

    1. /* flex类名 */
    2. /* 定义 */
    3. .flex-def {
    4.   display: -webkit-box;
    5.   display: -moz-box;
    6.   display: -ms-flexbox;
    7.   display: -webkit-flex;
    8.   display: flex;
    9. }
    10.  
    11. /* 侧轴居中 */
    12. .flex-cCenter {
    13.   -webkit-box-align: center;
    14.   -moz-align-items: center;
    15.   -webkit-align-items: center;
    16.   align-items: center;
    17. }
    18.  
    19. .flex-wrap {
    20.   flex-wrap: wrap;
    21. }
    22.  
    23. /* 主体信息布局 */
    24. .main {
    25.   width: 100%;
    26.   display: flex;
    27.   align-items: center;
    28.   justify-content: center;
    29. }
    30.  
    31. .main_left {
    32.   width: 60%;
    33. }
    34.  
    35. .main_left text {
    36.   margin-left: 7%;
    37.   color: #777A7C;
    38. }
    39.  
    40. .main_right {
    41.   width: 40%;
    42.   text-align: right;
    43.   padding-right: 5%;
    44.   color: #777A7C;
    45. }
    46.  
    47. /* 列表布局 */
    48. .item_all_position {
    49.   width: 100%;
    50.   display: flex;
    51.   align-items: center;
    52.   justify-content: center;
    53. }
    54.  
    55. .item_all {
    56.   box-sizing: border-box;
    57.   width: 95%;
    58.   border-radius: 10rpx;
    59.   padding: 0 2% 2% 2%;
    60.   margin-top: 5%;
    61.   background-color: #FFFFFF;
    62.   border-bottom: 2px solid rgba(202, 202, 202, 0.856);
    63.   /* border: 1px solid black; */
    64. }
    65.  
    66. /* 第一行 */
    67. .vv_1 {
    68.   font-size: 18px;
    69.   background-color: #ffffff;
    70. }
    71.  
    72. /* 第一行文字 */
    73. .vv_1_text {
    74.   display: flex;
    75.   width: 80%;
    76.   align-items: center;
    77.   padding-left: 3%;
    78. }
    79.  
    80. .vv_1_text1 {
    81.   font-size: 110%;
    82.   color: #76b5d4;
    83.   font-weight: bold;
    84. }
    85.  
    86. .vv_1_text2 {
    87.   color: #7e7e7e;
    88.   font-size: 90%;
    89.   margin-left: 5%;
    90. }
    91.  
    92. /* 第一行类型 */
    93. .type {
    94.   background-color: #65b5dd;
    95.   padding: 1% 5%;
    96.   font-size: medium;
    97.   text-align: center;
    98.   margin-bottom: 2%;
    99.   float: right;
    100. }
    101.  
    102. .vv_3 {
    103.   padding: 3% 0 3% 3%;
    104.   /* margin-left: 3%; */
    105.   background-color: #ffffff;
    106.   display: flex;
    107.   color: gray;
    108.   font-size: 95%;
    109. }
    110.  
    111. .vv_4 {
    112.   word-break: break-all;
    113.   padding: 3% 0 3% 3%;
    114.   /* margin-left: 3%; */
    115.   color: gray;
    116.   /* border:1px solid black; */
    117. }
    118. .vv_5{
    119.   padding: 0 0 3% 3%;
    120.   color: rgb(192, 82, 82);
    121. }
    122. .vv_5 text {
    123.   color: rgb(97, 97, 97);
    124. }
    125. .vv_4 text {
    126.   color: rgb(97, 97, 97);
    127. }
    128.  
    129. .vv_3 text {
    130.   color: rgb(97, 97, 97);
    131. }
    132.  
    133. .footer {
    134.   position: fixed;
    135.   display: flex;
    136.   bottom: 0;
    137.   width: 100%;
    138.   height: 80prx;
    139.   line-height: 80rpx;
    140.   text-align: center;
    141. }
    142.  
    143. .footer1 {
    144.   background-color: #80c2e2;
    145.   width: 50%;
    146.   height: 80prx;
    147.   line-height: 80rpx;
    148.   text-align: center;
    149.   border-right: 2px solid rgb(219, 219, 219);
    150. }
    151.  
    152. .footer2 {
    153.   background-color: #80c2e2;
    154.   width: 50%;
    155.   height: 80prx;
    156.   line-height: 80rpx;
    157.   text-align: center;
    158. }
    159.  
    160. .position {
    161.   width: 90%;
    162. }
    163.  
    164. /* 搜索框 */
    165. .search {
    166.   display: flex;
    167.   align-items: center;
    168.   justify-content: center;
    169.   padding: 5% 0 5% 0;
    170. }
    171.  
    172. .search .search_in {
    173.   display: flex;
    174.   align-items: center;
    175.   justify-content: space-between;
    176.   padding: 0 20rpx;
    177.   box-sizing: border-box;
    178.   height: 70rpx;
    179.   width: 95%;
    180.   border-radius: 5px;
    181.   background-color: white;
    182. }
    183.  
    184. .search_in image {
    185.   height: 45rpx;
    186.   width: 50rpx;
    187.   margin-right: 10px;
    188. }
    189.  
    190. .search input {
    191.   width: 100%;
    192. }
    193.  
    194. /* 暂无数据样式 */
    195. .nodata {
    196.   display: flex;
    197.   align-items: center;
    198.   justify-content: center;
    199.   color: gray;
    200.   font-size: 90%;
    201.   margin-top: 50%;
    202. }
    203. /* 分页 */
    204. .pagination {
    205.   display: flex;
    206.   align-items: center;
    207.   justify-content: left;
    208.   /* margin-bottom: 0; */
    209.   /* border: 1px solid black; */
    210. }
    211.  
    212. .page-button {
    213.   height: 30px;
    214.   line-height: 30px;
    215.   padding: 0 10px;
    216.   border: 1px solid white;
    217.   border-radius: 5px;
    218.   margin: 3%;
    219.   cursor: pointer;
    220. }
    221.  
    222. .page-info {
    223.   font-weight: bold;
    224. }

    js

    1. const app = getApp()
    2. let handname = ''
    3. Page({
    4.   data: {
    5.     search: app.globalData.icon + 'index/search.png',  
    6.     page: 1, // 当前页数
    7.     pageSize: 2, // 每页展示的数据条数
    8.     totalPage: 0, //总页数,
    9.     like_info1: '', //待排期的模糊查询条件
    10.   },
    11.   //模糊查询待排程信息
    12.   search_wait_list(event) {
    13.     this.page = 1;
    14.     this.data.like_info1 = event.detail.value;
    15.     this.getdata();
    16.   },
    17.   //进入已分配工单详情页
    18.   allocating_detial: function (e) {
    19.     // console.log(e.currentTarget.dataset.id) //待分配数据
    20.     wx.navigateTo({
    21.       url: '/pages/mine/detail/detail?id=' + e.currentTarget.dataset.id,
    22.     })
    23.   },
    24.   getdata(){
    25.     wx.request({
    26.       url: app.globalData.position + 'Repair/select_never_repaired',
    27.       data: {
    28.         username:app.globalData.username,
    29.         like_info1: this.data.like_info1,
    30.         page: this.data.page,
    31.         pageSize: this.data.pageSize
    32.       },
    33.       header: {
    34.         "Content-Type": "application/x-www-form-urlencoded"
    35.       },
    36.       method: 'POST',
    37.       dataType: 'json',
    38.       success: res => {
    39.         console.log(res.data)
    40.         this.setData({
    41.           list: res.data.info,
    42.           count: res.data.count,
    43.           totalPage: Math.ceil(res.data.total / this.data.pageSize)
    44.         })
    45.       },
    46.       fail(res) {
    47.         console.log("查询失败")
    48.       }
    49.     })
    50.   },
    51.   prevPage() {
    52.     if (this.data.page > 1) {
    53.       this.setData({
    54.         page: this.data.page - 1,
    55.         selList: [],
    56.       })
    57.       this.getdata();
    58.     }
    59.   },
    60.   nextPage() {
    61.     if (this.data.page < this.data.totalPage) {
    62.       this.setData({
    63.         page: this.data.page + 1,
    64.         selList: [],
    65.       })
    66.       this.getdata();
    67.     }
    68.   },
    69.   //进入页面显示
    70.   onLoad: async function (options) {
    71.     this.getdata();
    72.   },
    73.   //分享
    74.   onShareAppMessage:function(){
    75.     //清空登录信息
    76.     wx.removeStorageSync('username');
    77.     //返回登录页面
    78.     return {
    79.       title: '维修系统',
    80.       path: '/pages/login/main/main',
    81.       imageUrl: '/images/share/title.png',
    82.     }
    83.   },
    84. })

    thinkphp

    1. //查询从未维修过的单据
    2.     public function select_never_repaired()
    3.     {
    4.         $username = input('post.username');
    5.         $like_num = input('post.like_info1', '');
    6.         $page = input('post.page', 1); // 获取当前页数，默认为第一页
    7.         $pageSize = input('post.pageSize', 10); // 获取每页展示的数据条数，默认为10条
    8.         $start = ($page - 1) * $pageSize; // 计算查询的起始位置
    9.         //通过账户查询到对应id
    10.         $account_id = db::table('fa_account_info')->where(['username' => $username])->value('id');
    11.         //当前员工下以工单号模糊查询
    12.         $data['info'] = db::table('rep_info_base')
    13.         ->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])
    14.         ->where(['order_number' => ['like', '%' . $like_num . '%']])
    15.         ->limit($start,$pageSize)
    16.         ->select();
    17.         for ($i = 0; $i < count($data['info']); $i++) {
    18.             //创建时间
    19.             $data['info'][$i]['creation_time'] = date('Y-m-d H:i:s', $data['info'][$i]['creation_time']);
    20.             //期望完成时间
    21.             $data['info'][$i]['expect_complete_time'] = date('Y-m-d H:i:s', $data['info'][$i]['expect_complete_time']);
    22.             //分配时间
    23.             $data['info'][$i]['distribute_time'] = date('Y-m-d H:i:s', $data['info'][$i]['distribute_time']);
    24.             //排程时间
    25.             $data['info'][$i]['arrange_time'] = date('Y-m-d H:i:s', $data['info'][$i]['arrange_time']);
    26.             //维修状态设置为未维修
    27.             $data['info'][$i]['order_status'] = '待维修';
    28.         }
    29.         $data['total'] = db::table('rep_info_base')
    30.         ->where(['account_id' => $account_id, 'order_status' => '', 'main_status' => '已分配', 'if_arrange' => '是'])
    31.         ->where(['order_number' => ['like', '%' . $like_num . '%']])
    32.         ->count();
    33.         $data['count'] = $data['total'];
    34.         echo json_encode($data);
    35.     }

  • 相关阅读:
    位、比特、字节、字、帧等概念关系的理解
    AnsibleFATE部署过程
    java解析c结构体的数据
    混入组件 (mixin)
    移动流量的爆发式增长，社交电商如何选择商业模式
    高云USB下载器仿真器用户手册（包括在线逻辑分析仪的使用方法）
    开发指导—利用组件&插值器动画实现 HarmonyOS 动效
    java毕业设计Vue框架龙猫宠物交易平台源码+系统+数据库+lw文档+调试运行
    设计模式——策略模式
    【吴恩达机器学习笔记】六、过拟合及正则化
  • 原文地址：https://blog.csdn.net/weixin_46001736/article/details/132737621