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

news/2024/7/20 3:27:17 标签: 小程序, apache, 服务器

效果

核心代码

①wxml设置翻页标签

<view class="pagination"  wx:if="{{list.length>0}}">

      <view class="page-button" bindtap="prevPage">上一页</view>

      <view class="page-info">{{ page }}</view>

      <view class="page-info">/</view>

      <view class="page-info">{{ totalPage }}</view>

      <view class="page-button" bindtap="nextPage">下一页</view>

</view>

②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

  <!--待排期-->
  <view style="margin-bottom:5%">
    <!-- 搜索框 -->
    <view class="top">
      <view class="search">
        <view class="search_in">
          <!-- 使用代码请更改图片路径 -->
          <image src="{{search}}"></image>
          <input type="text" placeholder="请输入工单号" placeholder-style="color:#CCCCCC" bindconfirm="search_wait_list" />
        </view>
      </view>
    </view>
    <!-- 主干内容 -->
    <view class="main">
      <view class="main_left"><text>{{count}}条数据</text></view>
      <view class="main_right">
        <!-- <view bindtap="showSelIcon">{{iconStatu?'完成':'多选'}}</view> -->
      </view>
    </view>
    <view class="nodata" wx:if="{{list==''}}">暂无数据</view>
    <view class="item_all_position" wx:for="{{list}}" wx:key="index" data-id='{{item.id}}'>
      <view class=" flex-def flex-cCenter flex-zBetween item_all">
        <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}}'>
          <view class="vv_1">
            <!-- 故障类型 -->
            <view class="type">
              <view>{{item.fault_type}}</view>
            </view>
            <!-- 维修产品 -->
            <view class="vv_1_text">
              <view class="vv_1_text1">{{item.product_name}}</view>
              <view class="vv_1_text2">{{item.order_number}}</view>
            </view>
          </view>
          <view class="vv_4"><text>故障描述：</text>{{item.fault_description}}</view>
          <text class="vv_4" space="ensp"><text>期望时间：</text>{{item.expect_complete_time}}</text>
          <text class="vv_3" space="ensp"><text>故障地点：</text>{{item.report_address}}</text>
          <view class="vv_5"><text>维修状态：</text>{{item.order_status}}</view>
        </view>
      </view>
    </view>
    <view class="pagination"  wx:if="{{list.length>0}}">
      <view class="page-button" bindtap="prevPage">上一页</view>
      <view class="page-info">{{ page }}</view>
      <view class="page-info">/</view>
      <view class="page-info">{{ totalPage }}</view>
      <view class="page-button" bindtap="nextPage">下一页</view>
    </view>
  </view>

 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);
    }


http://www.niftyadmin.cn/n/5008505.html

相关文章

GNSS融合策略

GNSS融合策略

文章目录 一、背景二、松耦合融合策略1. 信息有效性判断2. 坐标系对齐3. 观测方程a.杆臂补偿b.速度融合c.位置融合d. 航向yaw融合 4.观测性分析1&#xff09;状态表示在VIO坐标系下的观测性分析2&#xff09;状态表示在GPS ENU坐标系下的观测性分析 三、紧耦合融合1. 系统状态向…
阅读更多...
鞋店小程序商城开发指南

鞋店小程序商城开发指南

网站制作教程分享&#xff01;新手也能学会的鞋店自建网站教程 在开发鞋店小程序商城时&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 浏览器搜索【乔拓云】注册登录账号进入操作后台&#xff0c;找到并点击【商城】中的【去管理】进入商城的后台管理页面。接着&…
阅读更多...
python webdriver 测试框架数据驱动json文件驱动的方式

python webdriver 测试框架数据驱动json文件驱动的方式

简介&#xff1a; 数据驱动excel驱动方式,就是数据配置在excel里面&#xff0c;主程序调用的时候每次用从excel里取出的数据作为参数&#xff0c;进行操作&#xff0c; 需要掌握的地方是对excel的操作&#xff0c;要灵活的找到目标数据 测试数据.xlsx: 路径-D:\test\0627 E…
阅读更多...
解决VSCode下载速度特别慢的问题

解决VSCode下载速度特别慢的问题

一、下载VSCode 1.打开VSCode官网 https://code.visualstudio.com 2.download下载 3.下载特别慢 二、解决VSCode下载速度特别慢 1.单击右下角全部显示 我是用chrome浏览器&#xff0c;点击右下角的全部显示按钮&#xff0c;可以跳转到下载内容页面。 如果你是用其他浏览器…
阅读更多...
【C刷题训练营】第三讲（c语言入门训练）

【C刷题训练营】第三讲（c语言入门训练）

前言: 大家好&#xff0c;我决定日后逐渐更新c刷题训练营的内容&#xff0c;或许能帮到入门c语言的初学者&#xff0c;如果文章有错误&#xff0c;非常欢迎你的指正&#xff01; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&…
阅读更多...
Python，Bytetrack 源码解读，参数，源码解释，逐句分析代码，目标追踪

Python，Bytetrack 源码解读，参数，源码解释，逐句分析代码，目标追踪

文章目录 1、得到索引2、高得分框参与匹配&#xff0c;可能会留下有匹配不了的框3、低得分框参与匹配4、处理 unconfirmed 匹配5、创建新的【STrack对象】6、扔掉太久没匹配到框的【STrack对象】7、输出追踪框 1、得到索引 self.args.track_thresh是轨迹阈值。轨迹的得分是iou…
阅读更多...
MySql 变量

MySql 变量

1.系统变量 1.1 系统变量分类 变量由系统定义&#xff0c;不是用户定义&#xff0c;属于 服务器 层面。系统变量分为全局系统变量&#xff08;需要添加 global 关键字&#xff09;以及会话系统变量&#xff08;需要添加 session 关键字&#xff09;&#xff0c;有时也把全局系…
阅读更多...
Java 复习笔记 - 面向对象进阶篇

Java 复习笔记 - 面向对象进阶篇

文章目录 一&#xff0c;Static&#xff08;一&#xff09;Static的概述&#xff08;二&#xff09;静态变量&#xff08;三&#xff09;静态方法&#xff08;四&#xff09;工具类&#xff08;五&#xff09;static的注意事项 二&#xff0c;继承&#xff08;一&#xff09;继…
阅读更多...
最新文章

Copyright @ 2022~2023