微信小程序:将搜索框和表格封装成组件,页面调用组件

一、实现效果 

实现搜索框,表格和翻页效果

二、组件实现

1、创建表格组件页面

(1)创建文件

在文件根目录(与pages同级)直接创建components文件夹,并创建表格的页面common-table/index

(2)视图层

a、写入表头

循环由主页面传递的columns,数据为字段名label,宽度为设置的width

b、写入表格行数据

循环主页面传递的list,根据表头字段对应展示行信息

c、暂无数据展示

如果传递的list有数据就展示表格信息

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

 如果传递的数据为空,就展示暂无数据提示 

<view wx:else class="none">暂无数据</view>
d、翻页实现

如果行的长度大于0就展示翻页功能,其实这个也可以放到<view wx:if="{{tableData.list.length > 0}}" class="table">中,写入上一页方法,下一页方法,页数/总页数

(3) json

开启component表明是组件

(4)逻辑层

a、获取主页面传递的表格数据

在properties参数中写入表格数据tableData,类型为对象,其值为columns和list

b、获取主页面传递的翻页数据

写入翻页用到的数据当前页码page和总页数totalPage

c、写入翻页方法-上一页

当前页码大于 1 时,触发一个名为 'prev' 的自定义事件,并传递上一页的页码(page - 1)给父组件。

this.triggerEvent('next', {page: this.data.page + 1
});

我这个组件要向外抛出一个叫 'prev' 的事件,并且带上参数 `{ page: 当前页-1 }”,让父组件知道需要加载上一页的数据。

d、写入翻页方法-下一页 

当用户当前所在的页面 **不是最后一页(page < totalPage)**时,就触发一个名为 next 的自定义事件,并携带下一个页面的页码(page + 1)。

this.triggerEvent('next', {page: this.data.page + 1
});

这个组件要向外抛出一个叫 'next' 的事件,并且带上参数 `{ page: 当前页+1 }”,让父组件知道需要加载下一页数据。”

2、创建搜索框组件页面

 (1)创建文件

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

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

相关文章

基于贝叶斯学习方法的块稀疏信号压缩感知算法

基于贝叶斯学习方法的块稀疏信号压缩感知算法 BSBL-FM-master/BSBL_BO.m , 15593 BSBL-FM-master/BSBL_FM.m , 12854 BSBL-FM-master/Phi.mat , 131256 BSBL-FM-master/README.md , 3954 BSBL-FM-master/demo.mat , 1610 BSBL-FM-master/demo_fecg.m , 1481 BSBL-FM-master/de…

【Python爬虫】requests知识点讲解

目录 前言1. requests库基础1.1 安装requests1.2 基本导入 2. HTTP请求方法2.1 GET请求2.2 POST请求2.3 其他HTTP方法 3. 请求头设置3.1 User-Agent设置3.2 常用请求头 4. 响应处理4.1 响应内容获取4.2 响应状态码4.3 响应头信息 5. 会话管理5.1 Session对象5.2 Cookie处理 6. …

服务器上安装配置vsftpd

目录 1. 安装vsftpd服务 2、修改配置文件 3. 修改用户白名单 4. 通过ftp客户端命令登录ftp服务器 5. 参考资料 1. 安装vsftpd服务 执行命令安装vsftp服务、和ftp客户端 yum install vsftpd yum install ftp 2、修改配置文件 在服务器上先创建一个系统用户&#xff0c;待…

C#实现图片文字识别

这几年的AI的发展&#xff0c;使得文字识别难度大大降低、精度大大的提高。百度飞浆就是一个非常好的AI框架&#xff0c;而且是开源的。 我们利用百度飞浆就能快速简单的实现文字识别功能&#xff0c;几行代码就可以集成。 其中百度飞浆的PaddleOCR&#xff0c;就是专门针对文…

Android Framework 调用栈

在Android Framework开发中&#xff0c;添加调用栈&#xff08;Call Stack&#xff09;是调试复杂问题&#xff08;如崩溃、死锁或流程追踪&#xff09;的核心手段。 一、Java层调用栈添加 适用于Activity、Service等组件或Framework中的Java代码。 基础方法&#xff1a; 使用…

Ollama安装非系统盘操作方法(2025年6月测试通过)

Ollama是当前部署大模型比较便利的工具&#xff0c;但是默认会将软件和模型都安装到C盘下&#xff0c;导致系统盘爆表&#xff0c;建议将软件和模型都放置在非系统盘。 1. 软件安装在非系统盘 &#xff08;1&#xff09;在D盘下手动创建ollama目录 &#xff08;2&#xff09…

《HTTP权威指南》 第1-2章 HTTP和URL基础

HTTP请求基础 格式化数据块称为HTTP报文 请求报文&#xff1a;从客户端发往服务器的HTTP报文&#xff0c;只有请求起始行请求首部&#xff0c;没有请求主体 响应报文&#xff1a;从服务器发往客户端的报文&#xff0c;包含响应起始行响应首部响应主体 HTTP报文通过传输控制…

9. TypeScript 泛型

TypeScript 中的泛型使开发者能够编写灵活、可重用的代码&#xff0c;同时保持类型安全。它们允许动态定义类型&#xff0c;确保函数、类和接口可以适用于任何数据类型。这有助于避免重复&#xff0c;提高代码的模块化&#xff0c;使其既类型安全又具备适应性。 一、认识泛型 …

Apache Iceberg与Hive集成:分区表篇

一、Iceberg分区表核心概念与Hive集成原理 1.1 分区表在大数据场景的价值 在大规模数据分析中&#xff0c;分区表通过将数据按特定维度&#xff08;如时间、地域、业务类型&#xff09;划分存储&#xff0c;可显著提升查询效率。Apache Iceberg的分区表设计融合了Hive的分区理…

SAST + IAST + DAST 全链路防护体系构建方案

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 1. 生命周期分层嵌入&#xff08;防御纵深&#xff09; 阶段工具防护重点集成触发点编码阶段SAST源码漏洞&#xff08;硬编码密钥、SQL注入模式&#x…

pnpm link如何不踩坑

前提一&#xff1a;我有一个source-project源码库&#xff0c;有一个develop-project项目库。想使用pnpm link对source-project进行本地调试。 前提二&#xff1a;source-project源码库已打包 本地调试详细步骤如下&#xff1a; 1、检查是否配置了系统环境变量&#xff0c;P…

vue3 javascript 多字段求和技巧

在 Vue 3 中&#xff0c;如果你需要在一个组件中处理多个字段的求和&#xff0c;你可以通过计算属性&#xff08;computed properties&#xff09;或者方法&#xff08;methods&#xff09;来实现。这里我将展示两种主要的方法&#xff1a; 方法 1&#xff1a;使用计算属性&am…

【LeetCode】每日一题 —— No.3405

LeetCode 3405 统计恰好有 K 个相等相邻元素的数组数目&#xff08;DP 构造型&#xff09; 题目概述 我们需要统计长度为 n 的数组 arr 满足如下条件的方案数&#xff1a; 每个元素在区间 [1, m] 之间恰好存在 k 个位置 i (1 ≤ i < n) 满足 arr[i] arr[i - 1] 也就是说…

Elsa Workflows: .NET 的开源工作流引擎简介

文章目录 Elsa Workflows&#xff1a; .NET 的开源工作流引擎核心定位与理念关键特性与优势当前 (Elsa 3) 的已知限制/待完善项总结 Elsa Workflows&#xff1a; .NET 的开源工作流引擎 Elsa Workflows 是一个开源的、模块化的 .NET 库集合&#xff0c;旨在为 .NET 应用程序提…

linux虚拟机yum命令报错解决方案

问题 假如出现了这样的问题&#xff0c;可能是虚拟机yum库存在问题 解决方法 1、打开cmd&#xff0c;输入ssh root地址&#xff0c;比如ssh root192.168.222..111&#xff0c;选yes&#xff0c;输入虚拟机密码 2、使用yum repolist,查看仓库状态&#xff0c;status下面如果是…

C++ 第一阶段 基本语法 - 第一节:变量与数据类型详解

目录 一、变量与数据类型概述 1.1 什么是变量&#xff1f; 1.2 数据类型分类 二、基本数据类型详解 2.1 整型&#xff08;int, short, long&#xff09; 2.1.1 常见整型类型 2.1.2 代码示例 2.1.3 注意事项 2.2 浮点型&#xff08;float, double&#xff09; 2.2.1 浮…

CppCon 2017 学习:CNL: A Compositional Numeric Library

你说的这段关于浮点数的问题总结得很精准&#xff0c;我帮你整理一下&#xff0c;让理解更清晰&#xff1a; The Problem with Floating-Point&#xff08;浮点数的问题&#xff09; 复杂的表示结构 浮点数由符号位 &#xff0c;有效数&#xff08;significand/mantissa&…

linux基础重定向及组合重定向

一、基础重定向操作符 ‌类别‌ ‌操作符‌ ‌含义‌ ‌示例‌ ‌备注‌ ‌标准输出‌ > 覆盖写入 stdout 到文件 ls > file.txt 文件不存在则创建&#xff0c;存在则清空内容 >> 追加 stdout 到文件末尾 date >> log.txt 保留原有内容 ‌标准…

佰力博科技与您探讨铁电分析仪适用场景

铁电分析仪是一种用于测试和研究铁电材料性能的精密仪器&#xff0c;其适用场景非常广泛&#xff0c;涵盖了材料科学、物理学、电子工程等多个领域。 1、材料科学与工程 铁电分析仪广泛应用于铁电材料的研究&#xff0c;包括薄膜、厚膜、块体材料以及电子陶瓷等。它能够测试材料…

JVM 内存模型与垃圾回收机制全解析:架构、算法、调优实践

Java 作为一门面向对象的编程语言&#xff0c;其核心优势之一是 “一次编写&#xff0c;到处运行” 的跨平台特性。这一特性背后&#xff0c;Java 虚拟机&#xff08;JVM&#xff09;扮演着至关重要的角色。JVM 不仅负责解释执行字节码&#xff0c;还通过内存管理和垃圾回收机制…