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

news2024/11/15 5:05:17

效果

核心代码

①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.coloradmin.cn/o/985808.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Friend.tech热潮未过，在推特刷屏的TipCoin又是个啥？

Friend.tech热潮未过，在推特刷屏的TipCoin又是个啥？

Web3社交赛道风起云涌&#xff0c;Friend.tech的热潮还没过&#xff0c;最近又有一款名为Tip Coin社交项目在X&#xff08;前Twitter&#xff09;开始刷屏。 TipCoin作为一款社交类区块链项目依托于X平台&#xff0c;用户通过在X平台上发布内容来进行“挖矿”&#xff0c;获得项…
阅读更多...
无涯教程-JavaScript - BITAND函数

无涯教程-JavaScript - BITAND函数

描述 BITAND函数返回两个数字的按位" AND"。 语法 BITAND (number1, number2)争论 Argument描述Required/Optionalnumber1 Must be in decimal form and greater than or equal to 0.Requirednumber2Must be in decimal form and greater than or equal to 0.Req…
阅读更多...
Vuepress样式修改内容宽度

Vuepress样式修改内容宽度

1、相关文件 一般所在目录node_modules\vuepress\theme-default\styles\wrapper.styl 2、调整宽度&#xff0c;截图中是已经调整好的&#xff0c;在我电脑上显示刚刚好。
阅读更多...
(其他) 剑指 Offer 46. 把数字翻译成字符串 ——【Leetcode每日一题】

(其他) 剑指 Offer 46. 把数字翻译成字符串 ——【Leetcode每日一题】

❓ 剑指 Offer 46. 把数字翻译成字符串 难度&#xff1a;中等 给定一个数字&#xff0c;我们按照如下规则把它翻译为字符串&#xff1a;0 翻译成 “a” &#xff0c;1 翻译成 “b”&#xff0c;……&#xff0c;11 翻译成 “l”&#xff0c;……&#xff0c;25 翻译成 “z”。…
阅读更多...
使用git把本地项目关联远程代码仓库，并推送到远程仓库

使用git把本地项目关联远程代码仓库，并推送到远程仓库

你在本地新建了一个项目&#xff0c;写好了代码&#xff0c;但是没有关联远程仓库&#xff0c;怎么关联并上传呢&#xff1f; 你要先去gitee创建一个代码仓库&#xff0c;然后复制http地址。 首次提交项目代码到一个新建的远程仓库&#xff1a; 方式一(推荐)&#xff1a; 1…
阅读更多...
测试工程师面试题，你都遇到过哪些呢？

测试工程师面试题，你都遇到过哪些呢？

其实在软件测试领域面试题多余牛毛&#xff0c;采取疯狂刷题的方式确实可以解决不少面试中可能碰到的问题&#xff0c;而且可以学到一些知识。但是&#xff0c;有可能刷的面试题一个都问不到。 如何才能解除上述尴尬&#xff0c;一定要记得不要脱离一个核心目的&#xff1a;找…
阅读更多...
QT 插件化图像算法软件架构

QT 插件化图像算法软件架构

为什么要做插件化软件架构&#xff1f; 通过 结构化、模块化、松耦合、高内聚、插件化&#xff0c;有助于提升软件开发效率。 1、通过结构化、模块化、插件化方式的软件设计与开发&#xff0c;减少重复开发、重复测试、重复BUG修复&#xff0c;从而提高开发效率、提升代码质量…
阅读更多...
Matlab 如何计算正弦信号的幅值和初始相角

Matlab 如何计算正弦信号的幅值和初始相角

Matlab 如何计算正弦信号的幅值和初始相角 1、概述 如果已知一个正弦信号的幅值&#xff0c;在FFT后频域上该信号谱线的幅值与设置值不同&#xff0c;而是大了许多&#xff1b;如果不知道某一正弦信号的幅値&#xff0c;又如何通FFT后在頻域上求出该正弦信号的幅值呢? 2、…
阅读更多...
应用出海，Google 分享如何让数字营销素材再上层楼

应用出海，Google 分享如何让数字营销素材再上层楼

数字营销广告要想取得理想的效果&#xff0c;广告素材是最关键的决定因素之一。 事实上米贸搜谷歌推广发现&#xff0c;在广告给品牌带来的销售额增量中&#xff0c;有 47% 都归功于广告素材。在当今自动化时代&#xff0c;广告素材的作用尤其重要&#xff1a;固然机器可以完成…
阅读更多...
5款知名度不高但非常好用的软件

5款知名度不高但非常好用的软件

​ 我们在使用一些流行的软件的时候&#xff0c;往往会忽略一些知名度不高但是功能非常强大的软件&#xff0c;有的是因为小众&#xff0c;有的是因为名不见经传&#xff0c;总之因为不出名&#xff0c;有许多的好用的软件都不为大众所知道。 1.图形绘制——Dia ​ Dia是一款…
阅读更多...
正中优配：旅游餐饮板块走高，曲江文旅涨停，西安旅游等拉升

正中优配：旅游餐饮板块走高，曲江文旅涨停，西安旅游等拉升

旅行餐饮板块7日盘中拉升走高&#xff0c;截至发稿&#xff0c;曲江文旅涨停&#xff0c;西安旅行涨超5%&#xff0c;君亭酒店、华天酒店、国旅联合、宋城演演艺等均上扬。 中国旅行研究院数据显现&#xff0c;今年暑期国内旅行人数达18.39亿人次&#xff0c;占全年国内旅行出…
阅读更多...
服务器中了Malloxx勒索病毒应该怎么办？勒索病毒解密，数据恢复

服务器中了Malloxx勒索病毒应该怎么办？勒索病毒解密，数据恢复

Malloxx勒索病毒是一种近年来发现的电脑病毒&#xff0c;它以加密用户电脑中的重要文件数据为手段&#xff0c;威胁用户并以此勒索钱财。这种病毒的传播方式多种多样&#xff0c;可以通过电子邮件、恶意网站、网络下载等方式进行传播。一旦电脑被感染&#xff0c;病毒会立即锁住…
阅读更多...
mfc 浮动窗口

mfc 浮动窗口

参考 MFC模拟360悬浮窗加速球窗口
阅读更多...
基于SpringBoot的宠物商店管理系统

基于SpringBoot的宠物商店管理系统

基于SpringBootVue的宠物商店管理系统&#xff0c;前后端分离 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 角色&#xff1a;普通用户、超级管理员 功能包含个人…
阅读更多...
普罗米修斯（Prometheus）

普罗米修斯（Prometheus）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、普罗米修斯&#xff08;Prometheus&#xff09;是什么&#xff1f;1.下载Prometheus工具&#xff08;切记和操作系统版本对应&#xff09;2.解压命令3.修改prom…
阅读更多...
android studio的Android Drawable Preview

android studio的Android Drawable Preview

Android Drawable Preview 应用后&#xff0c;如下图&#xff1a; 再也不用一个一个点开去看了 其他学习资料&#xff1a; 1、付费专栏《Android kotlin入门到进阶系列讲解》&#xff1a;https://blog.csdn.net/qq_35091074/category_11036895.html 2、免费专栏《Android kot…
阅读更多...
智慧工厂的未来：视频+数字孪生与工业4.0的融合

智慧工厂的未来：视频+数字孪生与工业4.0的融合

视频数字孪生技术在智慧工厂项目中具有广泛的应用&#xff0c;为生产制造提供了前所未有的机会和优势。下面将探讨数字孪生技术在智慧工厂项目中的多个应用场景。 数字孪生技术的首要应用之一是生产流程优化。通过将现实世界的工厂映射到数字孪生模型中&#xff0c;制造…
阅读更多...
恒运资本：银行股适合定投吗？为什么银行股适合定投？

恒运资本：银行股适合定投吗？为什么银行股适合定投？

在股票市场上&#xff0c;出资者能够通过手动不断的买入到达基金定投的效果&#xff0c;那么&#xff0c;银行股适合定投吗&#xff1f;为什么银行股适合定投&#xff1f;下面恒运资本为我们准备了相关内容&#xff0c;以供参考。 银行股适合定投&#xff0c;即通过定投不断的买…
阅读更多...
如何选择报修管理系统？报修工单管理系统有哪些功能和优势？

如何选择报修管理系统？报修工单管理系统有哪些功能和优势？

报修管理系统是一种能够帮助企业快速反应设备故障和异常情况&#xff0c;并将问题及时通知到相关人员&#xff0c;并对问题进行统计和分析的系统。它能够有效提高企业的工作效率&#xff0c;并减少人员成本的支出。那么,报修工单管理系统有哪些功能和优势呢&#xff1f;下面以“…
阅读更多...
基于Delft3D模型水体流动、污染物对流扩散、质点运移、溢油漂移及地表水环境报告编制教程

基于Delft3D模型水体流动、污染物对流扩散、质点运移、溢油漂移及地表水环境报告编制教程

详情点击链接&#xff1a;基于Delft3D模型水体流动、污染物对流扩散、质点运移、溢油漂移及地表水环境报告编制教程 前沿 Delft3D计算网格构建 Delft3D水动力数值模拟 Delft3D污染物对流扩散数值模拟 一&#xff0c;Delft3D软件及建模 1.1地表水数值模拟常用软件、优势、如何…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023