uni-app:实现点击按钮,进行数据累加展示(解决数据过多,导致出错)

效果

代码

核心代码

一、标签显示

<!-- 加载更多 -->
<view class="load_more" v-if="info.length >= pageNum * pageSize" @tap="loadMore">加载更多
</view>
  • v-if="info.length >= pageNum * pageSize":这是一个条件渲染的指令,当满足条件时才会渲染该元素。条件是判断当前已加载的元素数量是否达到了当前页码乘以每页的元素数量。
  • @tap="loadMore":这是一个点击事件绑定的指令,当用户点击该元素时,会触发loadMore方法。

 二、变量设置

data() {return {search: getApp().globalData.icon + 'index/search.png',add: getApp().globalData.icon + 'index/index/add.png',info: [],pageNum: 1,//默认初始页码pageSize: 3,//一页显示的条数like_trans_num:'',//模糊查询的单号}
},

 定义变量pageNum默认初始页码;pageSize一页显示的条数

三、加载更多

loadMore() {this.pageNum++;this.requestData();
},

点击加载更多按钮,执行内容: 页码数+1,再次执行获取数据的函数

四、获取数据

requestData() {uni.request({url: getApp().globalData.position + 'Warehouse/select_inhouse',data: {page: this.pageNum,pageSize: this.pageSize,like_trans_num:this.like_trans_num},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {if (res.data.info.length > 0) {this.info = this.info.concat(res.data.info);} else {// 没有更多数据// 可以在界面上显示相应提示}},fail(res) {console.log("查询失败") }});
}
  •  将页码、每次查询数量、模糊查询数据传入后端作为条件,获取数据库中数据
  • if (res.data.info.length > 0) {this.info = this.info.concat(res.data.info);}:判断是满足本页长度是否大于0,如果大于0,进行数据的拼接

五、后端

$page = input('post.page', 1);//获取前端传来的页码数,如果不存在默认为1
$pageSize = input('post.pageSize', 10);//获取前端传来的每页数量,如果不存在默认为10
$start = ($page - 1) * $pageSize; // 查询起始位置
->limit($start,$pageSize)//查询数据库时,作为查询条件

全部代码

前端

<template><view><!--新增--><image class='img' :src="add" @tap='add_inhouse'></image><!-- 搜索框 --><view class="top"><view class="search"><view class="search_in"><image :src="search"></image><input type="text" placeholder="请输入工单信息" placeholder-style="color:#CCCCCC"@confirm="search_inhouse" /></view></view></view><!-- 主干内容 --><view class="item_info" v-for="(item, index) in info" :key="index"><view class="all_content" :data-id="item.trans_num" @tap="detail_inhouse"><view class="all_position"><!-- 第一行 --><view class="line1"><!-- 单号 --><view class="line1_left">{{item.trans_num}}</view><view class="line1_right">{{item.created_by}}</view></view><view class="line2"><!-- 供应商名称 --><view class="line2_item">交易类型:{{item.transaction_type}}</view><view class="line2_item">仓库名称:{{item.subinventory_from}}</view><view class="line2_item">	创建时间:{{item.creation_date}}</view></view></view></view></view><!-- 加载更多 --><view class="load_more" v-if="info.length >= pageNum * pageSize" @tap="loadMore">加载更多</view></view>
</template><script>export default {data() {return {search: getApp().globalData.icon + 'index/search.png',add: getApp().globalData.icon + 'index/index/add.png',info: [],pageNum: 1,//默认初始页码pageSize: 3,//一页显示的条数like_trans_num:'',//模糊查询的单号}},methods: {//查询杂项入库的详情页detail_inhouse(e){// console.log(e.currentTarget.dataset.id)var trans_num = e.currentTarget.dataset.iduni.navigateTo({url: '../detail_inhouse/detail_inhouse?trans_num='+trans_num,})},//新增采购入库add_inhouse(){uni.navigateTo({url: '../add_inhouse/add_inhouse',})},loadMore() {this.pageNum++;this.requestData();},//模糊查询search_inhouse(e){this.info=[];this.pageNum= 1;this.pageSize=3;// console.log(e.target.value);this.like_trans_num = e.target.value;this.requestData();},requestData() {uni.request({url: getApp().globalData.position + 'Warehouse/select_inhouse',data: {page: this.pageNum,pageSize: this.pageSize,like_trans_num:this.like_trans_num},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {// console.log(res.data.info)// console.log(res.data.all_count)if (res.data.info.length > 0) {this.info = this.info.concat(res.data.info);} else {// 没有更多数据// 可以在界面上显示相应提示}},fail(res) {console.log("查询失败") }});}},onLoad() {this.requestData();}}
</script><style>/* 主体内容 */.all_content {margin-top: 25rpx;/* border: 1px solid black; */width: 100%;background-color: #ffffff;display: flex;justify-content: center;}.all_position {width: 92%;/* border: 1px solid red; */}.line1 {display: flex;width: 100%;padding: 20rpx 0;border-bottom: 4rpx solid #e5e5e5;}.line1_left {width: 50%;}.line1_right {width: 50%;text-align: right;}.line2 {/* border: 1px solid red; */padding: 20rpx 0 20rpx 0;}.line2_item {/* border: 1px solid red; */padding: 10rpx 0;}/* 背景色 */page {background-color: #F0F4F7; }/* 悬浮按钮 */.img {float: right;position: fixed;bottom: 6%;right: 2%;width: 100rpx;height: 100rpx;}/* 搜索框 */.search {display: flex;align-items: center;justify-content: center;background-color: #ffffff;/* border:1px solid black; */width: 100%;height: 100rpx;}.search .search_in {display: flex;align-items: center;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;height: 70rpx;width: 90%;background-color: #F0F4F7;border-radius: 10rpx;/* border:1px solid black; */}.search_in image {height: 40rpx;width: 45rpx;margin-right: 20rpx;}.search input {width: 100%;}/* 加载更多 */.load_more {text-align: center;padding: 20rpx 0;color: #999999;font-size: 28rpx;}
</style>

后端

   public function select_inhouse() {$page = input('post.page', 1);$pageSize = input('post.pageSize', 10);$like_trans_num = input('post.like_trans_num', '');$start = ($page - 1) * $pageSize; // 查询起始位置$subQuery = db::table('inv_transactions_all')->field('trans_num, subinventory_from, transaction_type, creation_date')->where('trans_num', 'like', 'ZR%')->where(['trans_num'=>['like', '%' . $like_trans_num . '%'],])->order('creation_date DESC')->group('trans_num, subinventory_from, transaction_type, creation_date')->limit($start,$pageSize)->buildSql();$data['info'] = db::table([$subQuery => 't'])->select();// 格式化时间foreach ($data['info'] as &$item) {$item['creation_date'] = date('Y-m-d H:i:s', $item['creation_date']);}// 格式化时间echo json_encode($data);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31921.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

辽宁线上3D三维虚拟工厂生产仿真系统应用场景及优势

工厂虚拟仿真是一种基于计算机技术和虚拟现实技术的数字化解决方案&#xff0c;它可以通过模拟工厂中的设备、流程和操作&#xff0c;来为工程师和操作人员提供了一个沉浸式的虚拟环境&#xff0c;帮助他们更好地了解和优化工厂生产过程。 工厂VR三维可视化技术为工业生产提供了…

Firefox 配置 Burp_proxy 和 证书

安装代理拓展 安装拓展&#xff1a; chrome &#xff1a; switchomega firefox &#xff1a; foxyproxy 创建代理 &#xff1a; 127.0.0.1:8080 安装burp证书 先开启burp&#xff0c;然后切换到 burp 的代理访问 https://burp/ 下载证书打开firefox设置 - 搜索”证书“ -…

ruby send call 的简单使用

refer: ruby on rails - What does .call do? - Stack Overflow Ruby使用call 可以调用方法或者proc m 12.method("") # > method gets the method defined in the Fixnum instance # m.class # > Methodm.call(3) #> 15 # 3 is passed inside the…

算法备案后,企业需要做什么?合规与执行挑战

随着技术的迅猛发展&#xff0c;算法已经成为多数企业核心竞争力的一部分。但在技术进步的同时&#xff0c;我们也面临了算法透明度、公平性以及安全性的问题。因此&#xff0c;许多国家已经开始实施算法备案制度&#xff0c;以确保算法的应用满足一定的标准和规范。但在完成算…

将静态库封装成python模块

很多硬件厂商的底层设备驱动都是以库的形式提供给开发者&#xff0c;有的是动态库&#xff0c;有的是静态库。开发上层应用&#xff0c;最快速便捷的方式当然还是用python&#xff0c;对于动态库&#xff0c;可以用python的ctypes库进行加载&#xff0c;而对于静态库&#xff0…

LeetCode150道面试经典题--验证回文串(简单)

1.题目 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &#xff1b;否…

uniapp 微信小程序 封装公共的请求js(api版本)

一、新建api文件夹 在项目目录下创建api文件夹&#xff0c;内放files跟index.js文件夹&#xff0c;files文件夹内放每个页面对应的js请求接口 1、index.js /*** api接口的统一出口*/ const api {}; const requireComponent require.context(./files, false, /\.js$/) requi…

SpringCloud实用篇2——Nacos配置管理 Feign远程调用 Gateway服务网关

目录 1 Nacos配置管理1.1 统一配置管理1.1.1 在nacos中添加配置文件1.1.2 从微服务拉取配置 1.2 配置热更新1.2.1 方式一1.2.2 方式二&#xff08;推荐&#xff09; 1.3.配置共享 2 搭建Nacos集群2.1 集群结构图2.2 搭建集群2.2.1 初始化数据库2.2.2 下载nacos2.2.3 配置Nacos2…

竞赛项目 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

面部表情识别4:C++实现表情识别(含源码,可实时检测)

面部表情识别4&#xff1a;C实现表情识别(含源码&#xff0c;可实时检测) 目录 面部表情识别4&#xff1a;C实现表情识别(含源码&#xff0c;可实时检测) 1.面部表情识别方法 2.人脸检测方法 3.面部表情识别模型(Python) &#xff08;1&#xff09; 面部表情识别模型的训练…

printf %.*s 原来是这样

今天看代码时&#xff0c;看到这样一个printf&#xff0c;以前没见过这样的&#xff0c;也没这样用过&#xff0c;一下子还真不知道是什么意思&#xff1a; // Response is received. Print it struct mg_http_message *hm (struct mg_http_message *) ev_data; printf("…

扫雷(超详解+全部码源)

C语言经典游戏扫雷 前言一.游戏规则二.所需文件三.创建菜单四.游戏核心内容实现1.创建棋盘2.打印棋盘3.布置雷4.排查雷5.game()函数具体实现 五.游戏运行实操六.全部码源 前言 &#x1f600;C语言实现扫雷是对基础代码能力的考察。通过本篇文章你将学会如何制作出扫雷&#xff…

Spring 使用注解储存对象

文章目录 前言存储 Bean 对象五大注解五大注解示例配置包扫描路径读取bean的示例 方法注解 Bean Bean 命名规则重命名 Bean 前言 通过在 spring-config 中添加bean的注册内容&#xff0c;我们已经可以实现基本的Spring读取和存储对象的操作了&#xff0c;但在操作中我们发现读…

每日一题——滑动窗口的最大值

滑动窗口的最大值 题目链接 暴力解法 最容易想到的当然还是通过两层循环来暴力求解&#xff1a;一层循环用来移动窗口&#xff0c;一层循环用来在窗口内找到最大值。这种做法的时间复杂度为O(kN)&#xff0c;会超出时间限制&#xff0c;因此&#xff0c;我们要找到更加高效的…

springboot国际化

springboot国际化 不需要引入额外的jar包 参考&#xff1a;https://zhuanlan.zhihu.com/p/551605839 1.rources要创建Resource Bundle 2.yml配置中引入Resource Bundle 引入Resource Bundle spring:messages:encoding: UTF-8basename: i18n/messages_common3.创建国际化工具…

彩色图转灰度图之c++实现(qt + 不调包)

1.介绍 在日常生活中&#xff0c;我们经常看到的图片是彩色图片&#xff0c;有时我们需要将彩色图片转换成灰度图片来处理&#xff0c;也就是将RGB三通道图片按照一定规则转换成一通道图片。 2.转换方式 彩色图片转灰度图片&#xff0c;一般有三种方法 第一种&#xff1a;平均法…

海思ss928部署手写数字识别模型

大致流程--------------------------------------------------------------------------------------------------------------------- 模型转换---------------------------------------------------------------------------------------------------- 1&#xff1a;准备MNI…

【EI复现】考虑区域多能源系统集群协同优化的联合需求侧响应模型(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

企业前后端分离软件架构如何设计?

企业前后端分离软件架构的设计涉及到前端和后端的独立性、通信方式、数据流管理等多个方面。下面我将为你介绍一个常见的前后端分离软件架构设计&#xff1a; 1、前端层&#xff1a; 框架选择&#xff1a;选择适合项目需求的前端框架&#xff0c;例如React、Vue.js、Angular等…

面试题记录

面试题记录 一.Vue中的合成事件和原生事件有哪些区别。二.parseint(3,2)返回什么值&#xff1f;为什么三.什么是闭包四.vue3和vue2区别有哪些五.vue3 响应式原理 双向绑定原理1. 响应式原理&#xff1a;2. 双向绑定原理&#xff1a;Vue3 中双向绑定的原理&#xff1a;下面是 Vu…