当前位置: 首页 > news >正文

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

一、实现效果 

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

二、组件实现

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)创建文件

相关文章:

  • springboot项目,利用docker打包部署
  • 简说 python
  • python题库及试卷管理系统
  • java循环语句-跳转关键字break、continue
  • 企业软件架构演进:从流程驱动到知识驱动的数字化转型路径
  • Elasticsearch/OpenSearch MCP Quickstart
  • C++并发编程-2.C++ 线程管控
  • FPGA基础 -- Verilog 表达式之操作符
  • FPGA基础 -- Verilog语言要素之数组
  • CMake指令:set_property和get_property
  • Tomcat本地部署Maven Java Web项目
  • Spring Boot + MyBatis + Redis Vue3 Docker + Kubernetes + Nginx
  • python大学生志愿者管理系统-高校志愿者管理信息系统
  • C++智能指针(详细解答)
  • 渣土车辆定位与监管:科技赋能城市建筑垃圾管理
  • 小米ROM下载安装
  • Java 常用类 Time API:现代时间处理的艺术
  • 项目的难点
  • 游戏技能编辑器之状态机的设计与实现
  • Visual Studio Code 的 AI 特性:开启智能编程新时代
  • 国内站长做国外网站/企业员工培训课程内容
  • 个人网站这么做/南京百度seo代理
  • logo图片大全简单/淮北seo
  • 网站建设柚子网络科技/网站制作
  • 网站a记录吗/seo是什么意思 seo是什么职位
  • 广州网站制作服务/seo培训一对一